rollup external 属性解析

一、原因

使用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属性,这只是冰山一角。如果有宝贵的意见或者建议,请各位博友指出~

猜你喜欢

转载自blog.csdn.net/qq_29722281/article/details/95596372