我正在从RequireJS迁移到Webpack,我在为模块需要jQuery时遇到了一些麻烦.
我知道有一些关于这方面的答案,我已经完成了它们,但我无法让它工作.这一个:Managing Jquery plugin dependency in webpack是我读过的那个.
我的webpack.config.js看起来像这样:
var webpack = require("webpack"); var bower_dir = __dirname + '/bower_components'; var config = { addvendor: function(name,path) { this.resolve.alias[name] = path; //this.module.noparse.push(new RegExp(path)); },entry: { app: ['./app/js/main.js'],vendors: ['jquery','bootstrap'] },resolve: { alias: {} },plugins: [ new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),new webpack.ProvidePlugin({ $: "jquery",jQuery: "jquery","window.jquery": "jquery" }) ],output: { path: './build',filename: 'bundle.js' },module: { noparse: [bower_dir + '/bootstrap/dist/js/bootstrap.min.js'],loaders: [] } }; config.addvendor('jquery',bower_dir + '/jquery/jquery.js'); config.addvendor('bootstrap',bower_dir + '/bootstrap/dist/js/bootstrap.min.js'); module.exports = config;
我正在使用ProvidePlugin在每个使用它的模块上都需要jQuery.
另外,我将供应商库放在vendors.js文件中,将我的模块放在main.js中.
我的main.js文件有几行代码只是为了测试$是否解析为jQuery:
$(".search-toggle").on("click",function(e) { e.preventDefault(); $(".search-container").toggle(); });
我的index.html有以下几行:
<script src="<s:url value="/resources/build/vendors.js"/>"></script> <script src="<s:url value="/resources/build/bundle.js"/>"></script>
当我运行我的应用程序时,我得到Uncaught TypeError:$即使$在全局范围内,也不是控制台中的函数.
我真的很感激你是否可以帮助我,因为我一直在编写和重写我的代码而无处可去.
非常感谢你提前!
解决方法
而不是webpack.ProvidePlugin,你可以使用
https://github.com/webpack/expose-loader:
装载机:[{ test:require.resolve(‘jquery’), loader:’expose?$!expose?jQuery’,}]