反应中的Chessboardjs NPM包，未定义参考错误$答案

【问题标题】：Chessboardjs NPM package in react, referenceerror $ is not defined反应中的Chessboardjs NPM包，未定义参考错误$
【发布时间】：2017-11-11 04:46:30
【问题描述】：

我正在尝试使用https://www.npmjs.com/package/chessboardjs 包。我编写了简单的反应组件来渲染棋盘，但它在 chessboardjs 模块中引发错误：ReferenceError: $ is not defined。组件代码：

import React, { Component } from 'react';
import Chess from 'chessboardjs';

export default class ChessBoard extends Component {
    render() {
        return (
            <div>
                <div id="chessboard" style={{"width": "400px"}}></div>
            </div>
        )
    }

    componentDidMount() {
        var board = Chess('chessboard');
    }
}

我已经尝试安装 JQuery npm 包并将其导入 ChessBoard 组件，但不幸的是它没有工作。

有没有办法解决这个问题？

【问题讨论】：

标签： javascript reactjs npm chess chessboard.js

【解决方案1】：

我认为您应该将 $、jQuery、window.jQuery 变量导入所有模块。如果你使用 webpack1，你可以这样尝试：

providePlugin = new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
  }),

【讨论】：

感谢您的回答。我是新手，该应用程序目前不使用 Webpack。有没有另一种方法可以在所有模块中包含 jQuery 或者 Webpack 是要走的路？

【解决方案2】：

不确定这是否是最好的方法，

import React, { Component } from 'react';
import $ from 'jquery'
import Chess from 'chessboardjs';

window.$ = $
window.jQuery = $

export default class ChessBoard extends Component {
    render() {
        return (
            <div>
                <div id="chessboard" style={{"width": "400px"}}></div>
            </div>
        )
    }

    componentDidMount() {
        var board = Chess('chessboard');
    }
}

【讨论】：