externals-外部扩展

[huangshuwei]

前言

externals 对于封装组件库，或者工具库非常有用。它可以防止将某些需要import的资源打包到输出文件中，而是在运行时再去从外部获取扩展依赖。具体参考官方文档

好处

打包体积小很多 假设我们封装基于 vue 的组件库，很难避免使用vue 的原型对象（prototype）。但是这样会将 vue 源码打包进去，如果配置了 externals，打包后的体积将会小很多。

使用externals 的条件

外部 library 可以下是下面任何一种形式：

• root：可以通过一个全局变量访问 library（例如，通过 script 标签）
• commonjs：可以将 library 作为一个 CommonJS 模块访问
• commonjs2：和上面的类似，但导出的是 module.exports.default
• amd：类似于 commonjs，但使用 AMD 模块系统

配置

支持 字符串、对象、字符串数组、函数、正则配置。如：

module.exports = {
  //...
  externals: [
    {
      // 字符串
      react: 'react',
      // 对象
      lodash : {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_' // indicates global variable
      },
      // 字符串数组
      subtract: ['./math', 'subtract']
    },
    // 函数
    function(context, request, callback) {
      if (/^yourregex$/.test(request)){
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },
    // 正则表达式
    /^(jquery|\$)$/i
  ]
};

参考

• https://webpack.docschina.org/configuration/externals/
• https://webpack.docschina.org/guides/author-libraries/

完