1、将变量暴露在全局变量上
1、下载
cnpm install expose-loader --save-dev
webpack4:expose-loader@1
2、配置
方式一:内联loader
在文件中,示例:
import $ from 'expose-loader?exposes=$,jQuery!jquery'
将$和JQuery暴露在全局变量上,如window
import {
map,
reduce,
} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
将map和reduce方法,分别绑定在全局变量的_.map和_.reduce上
方式二:配置webpack
module:{
rules:{
test:require.resolve('库名'),
loader:'expose-loader',
options:{
(1)exposeloader1版本写法:
exposes: ["$", "jQuery"], 暴露在全局变量的$和jQuery下
(2)exposeloader2版本写法,2版本需要webpack5:
exposes:{
globalName: "_.filter", 只会暴露模块的filter方法给全局变量下的_.filter
["_", "find"], 只会暴露filter下的find方法给全局变量下的_
moduleLocalName: "filter",
},
exposes:"_.map map", 暴露模块的map方法给_.map,
多配置写法,延续上方任意写法到一个对象中:
exposes: [
"_.map map",
{
globalName: "_.filter",
moduleLocalName: "filter",
},
{
globalName: ["_", "find"],
moduleLocalName: "myNameForFind",
},
],
}
}
}
3、使用
在浏览器端:window.使用
2、配置无需使用import或require语法就可直接使用全局变量,会向所有模块注入局部变量,减小打包体积
plugins:[
new webpack.ProvidePlugin({
全局变量名称:'库名',
$:'jquery',
x:['库名','方法名'] 引入库中的某个方法
}),
]
webpack4 expose-loader、ProvidePlugin将第三方库的变量暴露在全局变量上、无需导入即可使用的变量
最新推荐文章于 2024-04-16 09:57:05 发布