如何使用expose-loader 解决第三方库的插件依赖问题
expose 寓意为:暴露,就是为了解决一些插件不支持commonJs引入的问题(如:bootstrap.js,它只允许jQuery暴露为全局变量才可用)
这是bootstrap源码的开头。
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
经过一系列的搜索之后,得到了一些答案,有的说可以在webpack配置 externals
属性。如下:
module.exports = {
// ...
externals: {
jquery: 'jQuery'
}
// ...
};
然后再代码中使用 var jquery = require('jquery');
对静态文件使用script全局包含.
当然我们可以同时引入其它插件。
<script src='jquery.js'></script>
<script src='bootstrap.js'></script>
但这样并不是我们想要的最终目的。 我们想要用require 把 js库 引入进来,最后讲它们进行编译。expose-loader
给我们了这样的功能。
安装 node模块
npm install jquery --save
npm install bootstrap --save
安装 expose-loader
npm install expose-loader --save-dev
修改 webpack.config.js
module.exports = {
loaders: [{
// 得到jquery模块的绝对路径
test: require.resolve('jquery'),
// 将jquery绑定为window.jQuery
loader: 'expose?jQuery'
}]
};
ps : 如果想要让一个模块有多个注入全局变量,那么需要以下配置
module.exports = {
loaders: [{
// 得到jquery模块的绝对路径
test: require.resolve('jquery'),
// 将jquery绑定为window.jQuery 和 window.$
loader: 'expose?jQuery!expose?$'
}]
};
最后在main.js 使用
var jquery = require('jquery');
// 插件注入jquery
require('bootstrap');
如果在 js中使用expose加载器
// 这里 jquery 作为模块名 ,jQuery为输出变量名
var jquery = require("expose?jQuery!jquery");