expose-loader

expose-loader 加载器允许将模块（无论是整体还是部分）暴露给全局对象（self、window 和 global）。

有关兼容性提示和示例，请查阅官方文档中的Shimming 指南。

入门

首先，你需要安装 expose-loader

npm install expose-loader --save-dev

或

yarn add -D expose-loader

或

pnpm add -D expose-loader

（如果你正在使用 webpack 4，请安装 expose-loader@1 并遵循相应的说明。）

然后你可以通过两种方法使用 expose-loader。

内联

| 或 %20（空格）允许分隔 expose 的 globalName、moduleLocalName 和 override。

文档和语法示例可以在此处阅读。

[!警告]

%20 在查询字符串中代表一个空格，因为 URL 中不允许有空格。

import $ from "expose-loader?exposes=$,jQuery!jquery";
//
// Adds the `jquery` to the global object under the names `$` and `jQuery`

import { concat } from "expose-loader?exposes=_.concat!lodash/concat";
//
// Adds the `lodash/concat` to the global object under the name `_.concat`

import {
  map,
  reduce,
} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
//
// Adds the `map` and `reduce` method from `underscore` to the global object under the name `_.map` and `_.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（例如，通过 CLI 或 npm 脚本）。

选项

名称	类型	默认值	描述
暴露	{String|Object|Array<String|Object>}	undefined	暴露列表
globalObject	String	undefined	用于全局上下文的对象

exposes

类型

type exposes =
  | string
  | {
      globalName: string | Array<string>;
      moduleLocalName?: string;
      override?: boolean;
    }
  | Array<
      | string
      | {
          globalName: string | Array<string>;
          moduleLocalName?: string;
          override?: boolean;
        }
    >;

默认值：undefined

暴露列表。

string

允许使用字符串来描述一个暴露。

syntax

| 或 %20（空格）允许分隔 expose 的 globalName、moduleLocalName 和 override。

字符串语法 - [[globalName] [moduleLocalName] [override]] 或 [[globalName]|[moduleLocalName]|[override]]，其中

• globalName - 全局对象上的名称，例如浏览器环境中的 window.$（必需）
• moduleLocalName - 模块的方法/变量等名称（模块必须导出它）（可省略）
• override - 允许覆盖全局对象中现有值（可省略）

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

src/index.js

import $ from "jquery";
import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          // For `underscore` library, it can be `_.map map` or `_.map|map`
          exposes: "$",
          // To access please use `window.$` or `globalThis.$`
        },
      },
      {
        // test: require.resolve("jquery"),
        test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
        loader: "expose-loader",
        type: "javascript/auto",
        options: {
          // For `underscore` library, it can be `_.map map` or `_.map|map`
          exposes: "_",
          // To access please use `window._` or `globalThis._`
        },
      },
    ],
  },
};

object

允许使用对象来描述一个暴露。

globalName

类型

type globalName = string | Array<string>;

默认值：undefined

全局对象中的名称。（必需）。

src/index.js

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
        loader: "expose-loader",
        type: "javascript/auto",
        options: {
          exposes: {
            // Can be `['_', 'filter']`
            globalName: "_.filter",
            moduleLocalName: "filter",
          },
        },
      },
    ],
  },
};

moduleLocalName

类型

type moduleLocalName = string;

默认值：undefined

模块的方法/变量等名称（模块必须导出它）。

如果指定了 moduleLocalName，它将只暴露 moduleLocalName 的值。

src/index.js

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
        loader: "expose-loader",
        type: "javascript/auto",
        options: {
          exposes: {
            globalName: "_.filter",
            moduleLocalName: "filter",
          },
        },
      },
    ],
  },
};

override

类型

type override = boolean;

默认值：false

默认情况下，加载器不会覆盖全局对象中的现有值，因为这样做是不安全的。

在 development 模式下，如果全局对象中已存在该值，我们将抛出错误。

但你可以通过此选项配置加载器以覆盖全局对象中的现有值。

要强制覆盖全局对象中已存在的值，你可以将 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: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
        loader: "expose-loader",
        type: "javascript/auto",
        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) 方法下可用。

globalObject

type globalObject = string;

默认值：undefined

用于全局上下文的对象

import _ from "underscore";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
        loader: "expose-loader",
        type: "javascript/auto",
        options: {
          exposes: [
            {
              globalName: "_",
            },
          ],
          globalObject: "this",
        },
      },
    ],
  },
};

示例

暴露一个本地模块

index.js

import { method1 } from "./my-module.js";

my-module.js

function method1() {
  console.log("method1");
}

function method2() {
  console.log("method1");
}

export { method1, method2 };

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /my-module\.js$/,
        loader: "expose-loader",
        options: {
          exposes: "mod",
          // // To access please use `window.mod` or `globalThis.mod`
        },
      },
    ],
  },
};

贡献

我们欢迎所有贡献！

如果你是新用户，请在提交问题或拉取请求之前花一些时间查阅我们的贡献指南。

CONTRIBUTING

许可证

MIT