javascript - React - '$' 未定义

Question

我有一个 React Redux 应用程序。我添加了materialize作为CSS框架，但是materialize需要jquery。所以我安装了 Jquery 并通过 npm 将其添加到我的项目中。如果我像这样导入 jquery

import $ from 'jquery';

没有抛出任何错误，我可以使用它。但仅限于该组件。所以我添加了 wepback 插件，这样我就可以在我的 React 应用程序中调用 $ 了。但是，当我按照 webpack website 上的描述执行此操作时，它会出现以下错误。

Line 13:  '$' is not defined 

对于为什么会这样有什么想法吗？

app.js

import React  from 'react';
import '../styles/index.css';
import Header from './header/Header';

class App extends React.Component {
    constructor(props){
        super(props);
        console.log('Application ready');
    }
    componentWillMount(){
        $('ul.tabs').tabs();
    }
    render = () => (
        <div>
            <Header />
            <div>
                {this.props.children}
            </div>
        </div>
    )
}
export default App;

webpack.config.dev.js

    alias: {

  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  jquery: "jquery/src/jquery" // What i added 
  // $: "jquery/src/jquery" 
},

jquery位于node_modules文件夹中，从npm安装中，我没有将其添加到任何其他位置。

Answer 1

您已将 jQuery 别名为全局变量 jQuery ，不是 $ - 做 alias: { $: 'jquery' } .

错误，这不是 alias用于，参见 https://webpack.js.org/configuration/resolve/

(浏览器)JS 中的全局变量实际上是 window 的属性。所以在脚本开始时你可以这样做

import $ from 'jquery';
window.$ = $;

此后它将在全局范围内提供。将 jQuery 包含在其自己的 <script> 中标签也会做同样的事情。但这些都是非 webpack 的，有点顽皮，不是模块化的。 “正确”的做法是 import $ from 'jquery'在您需要的每个文件中。是的，如果你在很多地方都需要它，这会很乏味，但这意味着你知道哪里需要 jQuery，哪里不需要，如果你删除了所有使用 jQuery 的组件，jQuery 也会消失。 p>