加载中...

外部扩展(Externals)


webpack 中的 externals 配置提供了「不从 bundle 中引用依赖」的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。 此选项通常适用于 library 开发人员,但应用程序开发人员也可以充分利用此功能。

externals

string regex function array object

防止将某些 import 包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展包(external package)

例如,从 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(...); 

T> 用户(consumer),在这里是指任何用户应用程序终端(end user application),并且包含了使用 webpack 打包的 library。

有外部依赖(external dependency)的 bundle 能在多种模块上下文(module context)(大体上分为 CommonJS, AMD, 全局变量和 ES2015 模块)中使用。外部 library 可以是上述任何的模块形式,但是必须在不同变量下。

externals 支持以下模块上下文(module context)

  • global - 外部 library 能够作为全局变量使用。用户可以通过在 script 标签中引入来实现。这是 externals 的默认设置。
  • commonjs - 用户(consumer)应用程序可能使用 CommonJS 模块系统,因此外部 library 应该使用 CommonJS 模块系统,并且应该是一个 CommonJS 模块。
  • commonjs2 - 类似上面几行,但导出的是 module.exports.default
  • amd - 类似上面几行,但使用 AMD 模块系统。

externals 接受各种语法,并且按照不同方式去解释他们。

string

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

array

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

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

object

externals : {
  react: 'react'
}

// 或者

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

此语法用于描述所有外部 library 可用的访问方式。这里 lodash 这个外部 library 可以在 AMD 和 CommonJS 模块系统中通过 lodash 访问,但在全局变量形式下用 _ 访问。

function

It might be useful to define your own function to control the behavior of what you want to externalize from webpack. webpack-node-externals, for example, excludes all modules from the node_modules and provides some options to, for example, whitelist packages.

It basically comes down to this:

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

The 'commonjs ' + request defines the type of module that needs to be externalized.

regex

» TODO - I think its overkill to list externals as regex.

关于如何使用此 externals 配置的更多信息,请参考如何编写 library。

原文:https://webpack.js.org/configuration/externals/


还没有评论.