一、原因
使用rollup打包,比如我们在自己的库中需要使用第三方库,例如jquery等,又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external
属性。
二、示例
现在有一个示例项目,可以用作测试。直接运行npm run build
打包出的文件行数为170行。
现在我们要在项目中引用jquery。
在package.json
中添加jquery dependencies
:
"dependencies": {
"jquery": "^3.2.1"
},
然后我们在待打包的某个文件(示例文件为Animal.js)添加jquery引用:
1 不配置external属性:
我们再次运行npm run build
,发现jquery包被打包进了我们最终生成的文件中:
瞬间变成了10000多行。然而我们并不想这样。我们只想在我们最终运行环境单独通过CDN的方式引入jquery:
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../dist/animals.js"></script>
2 配置external属性:
短短一句话,执行npm run build
发现我们生成的文件就重新回到了170行:
但是,控制台确出现了一个警告:
这是由于我们没有配置jquery的全局模块名称。rollup猜出了我们的意思。翻阅官网文档,找到了这样一段描述:
配置jquery的全局模块名:
再次运行。没有再出现警告,行数也是正常行数。
三、结语:
对于external属性,这只是冰山一角。如果有宝贵的意见或者建议,请各位博友指出~