我有一个React Redux应用程序。我添加materialize作为CSS框架,但实现需要jquery。所以我安装了Jquery并通过npm将它添加到我的项目中。如果我像这样导入jquery
import $ from 'jquery';
不会抛出错误并且无法使用它。但仅限于该组件。所以我添加了wepback插件,所以我可以在我的反应应用程序中再调用$。但是,当我按照webpacks 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安装,我没有将它添加到任何其他位置。
答案 0 :(得分:4)
您已将jQuery别名为全局变量 jQuery
,而不是$
- 执行alias: { $: 'jquery' }
。
错误,这不是alias
的用途,请参阅https://webpack.js.org/configuration/resolve/
(浏览器)JS中的全局变量实际上是window
的属性。所以在你的脚本开始时你可以做到
import $ from 'jquery';
window.$ = $;
之后它将全球上市。在自己的<script>
标记中包含jQuery会做同样的事情。但这些都是un-webpack,有点顽皮,不是模块化的。在您需要的每个文件中,“正确”的事情是import $ from 'jquery'
。是的,如果你需要它在很多地方,这将是乏味的,但它意味着你知道你需要jQuery的地方和你不需要的地方,如果你删除了所有使用jQuery的组件,jQuery也会消失。