expose-loader

免责声明:expose-loader 是由社区成员维护的第三方包,它可能不支持 webpack 的相同支持、安全策略或许可,并且它不受 webpack 维护。

npm node tests coverage discussion size

expose-loader 加载器允许将模块(全部或部分)公开给全局对象(selfwindowglobal)。

有关兼容性问题的更多提示,请查看官方文档中的 垫片

入门

首先,你需要安装 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 的 globalNamemoduleLocalNameoverride。可以在 此处 阅读文档和语法示例。

警告

%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 模块。并且仅在捆绑包中使用时才公开它。

并通过你首选的方法运行 webpack

选项

名称类型默认值说明
暴露{String|Object|Array<String|Object>}未定义expose 列表
全局对象String未定义用于全局上下文的 Object

exposes

类型

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

默认值:undefined

expose 列表。

string

允许使用字符串来描述 expose。

syntax

|%20(空格)允许分隔 expose 的 globalNamemoduleLocalNameoverride

字符串语法 - [[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",
            },
          ],
        },
      },
    ],
  },
};

它将向全局对象公开 mapfilterfind(在 myNameForFind 名称下)方法。

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

globalObject

type globalObject = string;

默认值:undefined

用于全局上下文的 Object

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`
        },
      },
    ],
  },
};

贡献

如果您尚未阅读,请花点时间阅读我们的贡献指南。

贡献

许可证

MIT