我在应用程序中使用Webpack,在其中创建两个入口点- 所有我的JavaScript文件/代码的bundle.js,以及所有库(如jQuery和React)的vendor.js。为了使用以jQuery为依赖项的插件,并且我也希望在vendor.js中使用它们,我该怎么做?如果这些插件具有多个依赖项怎么办?
目前,我正在尝试在此处使用此jQuery插件-https: //github.com/mbklein/jquery- elastic。Webpack文档中提到了providePlugin和imports- loader。我使用了ProvidePlugin,但是jQuery对象仍然不可用。这是我的webpack.config.js的样子-
var webpack = require('webpack'); var bower_dir = __dirname + '/bower_components'; var node_dir = __dirname + '/node_modules'; var lib_dir = __dirname + '/public/js/libs'; var config = { addVendor: function (name, path) { this.resolve.alias[name] = path; this.module.noParse.push(new RegExp(path)); }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jquery: "jQuery", "window.jQuery": "jquery" }), new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity) ], entry: { app: ['./public/js/main.js'], vendors: ['react','jquery'] }, resolve: { alias: { 'jquery': node_dir + '/jquery/dist/jquery.js', 'jquery.elastic': lib_dir + '/jquery.elastic.source.js' } }, output: { path: './public/js', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'jsx-loader' }, { test: /\.jquery.elastic.js$/, loader: 'imports-loader' } ] } }; config.addVendor('react', bower_dir + '/react/react.min.js'); config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js'); config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js'); module.exports = config;
但是尽管如此,它仍然在浏览器控制台中引发错误:
未捕获的ReferenceError:未定义jQuery
同样,当我使用imports-loader时,它会引发错误,
要求未定义”
在这一行:
var jQuery = require("jquery")
但是,当我不将其添加到vendors.js文件中时,可以使用相同的插件,而是以普通的AMD方式要求它,就像我包含其他JavaScript代码文件一样,例如-
define( [ 'jquery', 'react', '../../common-functions', '../../libs/jquery.elastic.source' ],function($,React,commonFunctions){ $("#myInput").elastic() //It works });
但这不是我想要做的,因为这意味着jquery.elastic.source.js和我的JavaScript代码一起捆绑在bundle.js中,并且我希望我所有的jQuery插件都在vendor.js捆绑包中。那么我该如何实现呢?
您已经混合了各种方法来包括旧供应商模块。这是我要解决的方法:
dist
大多数模块dist在其main字段中链接版本package.json。尽管这对于大多数开发人员很有用,但对于webpack而言,最好为src版本加上别名,因为webpack能够更好地优化依赖关系(例如,使用时DedupePlugin)。
main
package.json
src
DedupePlugin
// webpack.config.js module.exports = { ... resolve: { alias: { jquery: "jquery/src/jquery" } } };
但是,在大多数情况下,该dist版本也可以正常工作。
ProvidePlugin
大多数旧版模块都依赖于特定全局变量的存在,例如jQuery插件on $或jQuery。在这种情况下,您可以配置webpack,使其在var $ = require("jquery")每次遇到全局$标识符时都在前面。
$
jQuery
var $ = require("jquery")
var webpack = require("webpack"); ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ]
this
一些旧模块依赖于this成为window对象。当模块在thisequals 的CommonJS上下文中执行时,这将成为问题module.exports。在这种情况下,您可以this使用imports- loader覆盖。
window
module.exports
运行npm i imports-loader --save-dev然后
npm i imports-loader --save-dev
module: { loaders: [ { test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: "imports-loader?this=>window" } ] }
imports-loader也可以用于手动注入各种变量。但是在大多数情况下,ProvidePlugin当涉及到隐式全局变量时,它会更有用。
有些模块支持不同的模块样式,例如AMD,CommonJS和legacy。但是,大多数情况下,它们首先检查define然后使用一些古怪的代码导出属性。在这些情况下,通过设置可以帮助强制CommonJS路径define = false。
define
define = false
module: { loaders: [ { test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, loader: "imports-loader?define=>false" } ] }
如果您不关心全局变量,而只希望使用旧脚本,则也可以使用脚本加载器。它将在全局上下文中执行模块,就像您已通过<script>标签将其包括在内一样。
<script>
noParse
如果该模块没有AMD /CommonJS版本,并且要包含dist,则可以将此模块标记为noParse。然后,webpack将仅包含模块而不对其进行解析,这可用于缩短构建时间。这意味着任何需要AST的功能(例如ProvidePlugin)都将无法使用。
module: { noParse: [ /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/ ] }