阅读(1877) (0)

Webpack expose-loader

2023-05-20 14:27:19 更新

expose-loader​ 允许暴露一个模块(整体或者部分)给全局对象(​self​、​window​ 和 ​global​)。

想要获取有关兼容性的进一步提示,请查看官方文档中的 Shimming

快速开始

首先,你需要安装 ​expose-loader​:

$ npm install expose-loader --save-dev

(如果你在使用 webpack4,请安装 ​expose-loader@1​ 并按照 相应说明 进行配置。)

然后你可以用两种方法来用 ​expose-loader​。

内联

可以使用 | 或者 %20(空格)分隔 expose 中的 globalName、moduleLocalName 和 override。

⚠ %20 是查询字符串中的空格,因为你不能在 URL 中使用空格
import $ from "expose-loader?exposes=$,jQuery!jquery";
//
// 将 `jquery` 添加到全局对象中,其名称为 `$` 和 `jQuery`
import { concat } from "expose-loader?exposes=_.concat!lodash/concat";
//
// 将 `lodash/concat` 添加到全局对象中,其名称为 `_.concat`
import {
  map,
  reduce,
} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
//
// 将 `underscore` 中的 `map` 和 `reduce` 方法分别添加到全局对象中,其名称为 `_.map` 和 `_.reduce`

使用配置文件

src/index.js

import $ from "jquery";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
      {
        test: require.resolve("underscore"),
        loader: "expose-loader",
        options: {
          exposes: [
            "_.map|map",
            {
              globalName: "_.reduce",
              moduleLocalName: "reduce",
            },
            {
              globalName: ["_", "filter"],
              moduleLocalName: "filter",
            },
          ],
        },
      },
    ],
  },
};

require.resolve 调用是一个 Node.js 函数(和 webpack 进程中的 require.resolve 无关)。 require.resolve 给出模块的绝对路径 ("/.../app/node_modules/jquery/dist/jquery.js")。 所以 expose 只应用于 jquery 模块。并且只会在 bundle 中使用时才会被暴露。

然后用你喜欢的方式运行 webpack。

配置项

Name Type Default Description
exposes {String|Object|Array<String|Object>} undefined List of exposes

exposes

类型:​String|Object|Array<String|Object>​ 默认值:undefined

List of exposes.

String

允许用一个 ​string​ 来描述 expose。

Syntax

可以使用 | 或者 %20(空格)分隔 expose 中的 globalName、moduleLocalName 和 override。

字符串语法 - [[globalName] [moduleLocalName] [override]] 或者 [[globalName]|[moduleLocalName]|[override]],含义如下:

  • globalName​ - 全局对象的名称,比如 window.$ 用于浏览器环境(必填项)
  • moduleLocalName​ - 模块的方法/变量/等的名称(该模块必须导出它)(可以省略)
  • override​ - 允许覆盖在全局对象中存在的值(可以省略)

如果 moduleLocalName 没有指定,它将整个模块暴露给全局对象,否则它只暴露 moduleLocalName 的值。

src/index.js

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          // 对于 `underscore`,它可以是 `_.map map` 或者 `_.map|map`
          exposes: "jquery",
        },
      },
    ],
  },
};

Object

允许用一个对象来描述 expose。

globalName

类型:​String|Array<String>​ 默认值:undefined

全局对象中的名字。(必填项)。

src/index.js

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("underscore"),
        loader: "expose-loader",
        options: {
          exposes: {
            // 可以是 `['_', 'filter']`
            globalName: "_.filter",
            moduleLocalName: "filter",
          },
        },
      },
    ],
  },
};
moduleLocalName

类型:​String​ 默认值:undefined

模块中的方法/变量/等的名称(该模块必须导出它)。 如果指定了 moduleLocalName,它只暴露 moduleLocalName 的值。

src/index.js

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("underscore"),
        loader: "expose-loader",
        options: {
          exposes: {
            globalName: "_.filter",
            moduleLocalName: "filter",
          },
        },
      },
    ],
  },
};
override

类型:​Boolean​ 默认值:false

默认情况下,loader 不会覆盖全局对象中的现有值,因为它是不安全的。 在 development 模式下,如果值已经出现在全局对象中则抛出一个错误。 但是你可以使用此选项配置 loader 以覆盖全局对象中的现有值。

为了强制覆盖已经存在在全局对象中的现有值,你可以设置 override 选项值为 true。

src/index.js

import $ from "jquery";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: {
            globalName: "$",
            override: true,
          },
        },
      },
    ],
  },
};

Array

src/index.js

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("underscore"),
        loader: "expose-loader",
        options: {
          exposes: [
            "_.map map",
            {
              globalName: "_.filter",
              moduleLocalName: "filter",
            },
            {
              globalName: ["_", "find"],
              moduleLocalName: "myNameForFind",
            },
          ],
        },
      },
    ],
  },
};

它将 只 暴露 map、filter 和 find 方法(名称为 myNameForFind) 给全局对象。

在浏览器中,这些方法可以在 windows._.map(..args)、windows._.filter(...args) 和 windows._.myNameForFind(...args) 下使用。

贡献

如果你还没有阅读,请花一点时间阅读我们的贡献指南。

License

MIT