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（空白）允許分隔公開的 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"）。因此，公開僅適用於 jquery 模組。而且僅在套件中使用時才會公開。

並透過您偏好的方法執行 webpack。

選項

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 (空白) 允許分隔公開的 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

預設情況下，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: /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`
        },
      },
    ],
  },
};

貢獻

如果你尚未閱讀，請花點時間閱讀我們的貢獻指南。

貢獻指南

授權

MIT