React-'$'未定义

Question

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

import $ from 'jquery';

没有抛出任何错误，并且无法使用它。但仅在该组件上。所以我添加了wepback插件，这样我就可以在我的react应用程序中调用$了。但是，当我按照webpacks 网站上的说明进行操作时，出现以下错误。

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的组件，jQuery也将消失。