前言
对于前端开发者来说，使用 webpack 是非常常见的事情。在 webpack 中，可以使用 externals 配置选项将你的某些依赖指定为外部依赖，然后这些依赖并不会被打包到输出的 bundle 中。而要使用这些依赖，你需要在你的 HTML 文件中通过 CDN 或者其他方式引入它们。其中最主要的应用场景是用来减小打包后的文件大小，加快加载速度。
然而，在实际开发中，我们往往需要定制化外部依赖的位置，指定它的命名空间、CDN 地址等等。而此时，externals 的配置就已经不能满足这些需要了。本文将介绍一款 npm 包 webpack-generate-umd-externals，这个包可以帮助我们在 webpack 中更方便地处理 UMD 模块的 externals 配置。
安装和使用
使用 webpack-generate-umd-externals，可以在 webpack 配置文件中通过简单的配置来处理 externals 模块。下面是使用方法：
安装
--- - ------------------------------ ----------
使用
----- ------------------ - ------------------------------------------
-- ---
----- ------------- - -
-- ---
-------- -
--- --------------------
------- -
---- -----------------------------------------------
---- --------
--
---- -
---- -----------------------------------------
---- -----
--
--- -
---- ---------
---------- -------
-
--
-
--上述代码通过在 plugins 选项中引入了 UmdExternalsPlugin，随后通过在 plugin 的参数中具体定义外部依赖的 url/namespace/var 选项，实现 externals 配置的定制化。
参数说明
UmdExternalsPlugin 需要的参数是一个对象，它属性列举如下：
- libraryName：String 库名称。可以在 Webpack 配置的
externals属性中以libraryName为 key，指向 CDN 等外部引用的地址；还可以在libraryTarget: 'umd'的设置下，为umdNamedDefine插件生成的 UMD 模块指定名称。如果你的业务使用的是公用的第三方库，推荐使用此属性。 - **[var]**：String UMD 模块中的变量名。若此模块不会暴露变量，变量名可省略不写。webpack-generate-umd-externals 自动为 UMD 模块加上
exporting __esModule = true;语句。默认情况下，externals 配置的变量名与库名称一致。 - [url]: String CDN 地址。在将各种第三方库的版本升级时，可指定 URL 对应版本的地址，并在其他项目中也可以使用相同的 URL 和版本号，实现版本的统一。如果 CDN 加载出错、CDN 提供商商业运营出现问题等情况，本地的 NPM 包需要及时更新或切回。
- [namespace]: String 命名空间。引入 UMD 模块时使用的命名空间，你可以根据自己的使用习惯及业务需求在 front-end、namespace 或者其他关键词等之间进行选择。
小结
我们经常需要引入一些外部依赖库，使用 externals 可以让这些库成为客户端代码的外部依赖。但对于一些自己开发的库，还需要定制化配置它的命名空间、URL 地址等信息。webpack-generate-umd-externals 已经成为这类场景下解决方案之一，可以自动生成 UMD 模块的 externals 配置，为项目开发带来更多便利。同时，在加载第三方组件的自定以配置中设置 URL，还可以实现版本统一。如果你对 webpack 配置不熟悉，那么使用这个工具是相对简单的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671048dd3466f61ffdcd5