webpack4 expose-loader、ProvidePlugin将第三方库的变量暴露在全局变量上、无需导入即可使用的变量

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:['库名','方法名']	引入库中的某个方法
	    }),
	]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值