外部环境 | Externals

外部对象

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。此功能通常对 __library 开发人员__来说是最有用的，然而也会有各种各样的应用程序用到它。

用户(consumer)，在这里是指，引用了「使用 webpack 打包的 library」的所有终端用户的应用程序(end user application)。

externals

string array object function regex

例如，从 CDN 引入 jQuery，而不是把它打包：

index.html

...
<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"></script>
...

webpack.config.js

externals: {
  jquery: 'jQuery'
}

这样就剥离了那些不需要改动的依赖模块，换句话，下面展示的代码还可以正常运行：

import $ from 'jquery';

$('.my-element').animate(...

具有外部依赖(external dependency)的 bundle 可以在各种模块上下文(module context)中使用，例如 CommonJS, AMD, 全局变量和 ES2015 模块。外部 library 可能是以下任何一种形式：

root：可以通过一个全局变量访问 library（例如，通过 script 标签）。

commonjs：可以将 library 作为一个 CommonJS 模块访问。

commonjs2：和上面的类似，但导出的是 module.exports.default.

amd：类似于 commonjs，但使用 AMD 模块系统。

externals 接受各种语法并以不同的方式解释它们。

string

externals中的jQuery,表示你的包将需要访问全局形式的jQuery变量。

array

externals: {
  subtract: ['./math', 'subtract']
}

subtract: ['./math', 'subtract'] 转换为父子结构，其中 ./math 是父模块，而 bundle 只引用 subtract 变量下的子集。

object

externals : {
  react: 'react'
}

// or

externals : {
  lodash : {
    commonjs: "lodash",
    amd: "lodash",
    root: "_" // indicates global variable
  }
}

// or

externals : {
  subtract : {
    root: ["math", "subtract"]
  }
}

此语法用于描述外部 library 所有可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问，但在全局变量形式下用 _ 访问。subtract 可以通过全局 math 对象下的属性 subtract 访问（例如 window['math']['subtract']）。

function

定义你自己的函数来控制从webpack中外化的行为可能是有用的。例如，webpack-node-externals 会从 node_modules 中排除所有模块，并向白名单包提供一些选项。

它基本上归结为以下：

externals: [
  function(context, request, callback) {
    if (/^yourregex$/.test(request)){
      return callback(null, 'commonjs ' + request
    }
    callback(
  }
],

'commonjs ' + request定义了需要被外部模块的类型。

regex

匹配给定正则表达式的每个依赖项都将从输出包中排除。

externals: /^(jquery|\$)$/i

在这种情况下，任何名为jQuery的依赖项，大写或不是或$都将被外化。

有关如何使用此配置的更多信息，请参阅有关如何创建库的文章。