Webpack expose-loader

expose-loader? 允許暴露一個(gè)模塊（整體或者部分）給全局對(duì)象（?self?、?window? 和 ?global?）。

想要獲取有關(guān)兼容性的進(jìn)一步提示，請(qǐng)查看官方文檔中的 Shimming。

快速開始

首先，你需要安裝 ?expose-loader?：

$ npm install expose-loader --save-dev

（如果你在使用 webpack4，請(qǐng)安裝 ?expose-loader@1? 并按照 相應(yīng)說明 進(jìn)行配置。）

然后你可以用兩種方法來用 ?expose-loader?。

內(nèi)聯(lián)

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

? %20 是查詢字符串中的空格，因?yàn)槟悴荒茉?URL 中使用空格

import $ from "expose-loader?exposes=$,jQuery!jquery";
//
// 將 `jquery` 添加到全局對(duì)象中，其名稱為 `$` 和 `jQuery`

import { concat } from "expose-loader?exposes=_.concat!lodash/concat";
//
// 將 `lodash/concat` 添加到全局對(duì)象中，其名稱為 `_.concat`

import {
  map,
  reduce,
} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
//
// 將 `underscore` 中的 `map` 和 `reduce` 方法分別添加到全局對(duì)象中，其名稱為 `_.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 調(diào)用是一個(gè) Node.js 函數(shù)（和 webpack 進(jìn)程中的 require.resolve 無關(guān)）。 require.resolve 給出模塊的絕對(duì)路徑 ("/.../app/node_modules/jquery/dist/jquery.js")。 所以 expose 只應(yīng)用于 jquery 模塊。并且只會(huì)在 bundle 中使用時(shí)才會(huì)被暴露。

然后用你喜歡的方式運(yùn)行 webpack。

配置項(xiàng)

exposes

類型：?String|Object|Array<String|Object>? 默認(rèn)值：undefined

List of exposes.

String

允許用一個(gè) ?string? 來描述 expose。

Syntax

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

字符串語法 - [[globalName] [moduleLocalName] [override]] 或者 [[globalName]|[moduleLocalName]|[override]]，含義如下：

• ?globalName? - 全局對(duì)象的名稱，比如 window.$ 用于瀏覽器環(huán)境（必填項(xiàng)）
• ?moduleLocalName? - 模塊的方法／變量／等的名稱（該模塊必須導(dǎo)出它）（可以省略）
• ?override? - 允許覆蓋在全局對(duì)象中存在的值（可以省略）

如果 moduleLocalName 沒有指定，它將整個(gè)模塊暴露給全局對(duì)象，否則它只暴露 moduleLocalName 的值。

src/index.js

import _ from "underscore";

webpack.config.js

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

Object

允許用一個(gè)對(duì)象來描述 expose。

globalName

類型：?String|Array<String>? 默認(rèn)值：undefined

全局對(duì)象中的名字。（必填項(xiàng)）。

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? 默認(rèn)值：undefined

模塊中的方法／變量／等的名稱（該模塊必須導(dǎo)出它）。 如果指定了 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? 默認(rèn)值：false

默認(rèn)情況下，loader 不會(huì)覆蓋全局對(duì)象中的現(xiàn)有值，因?yàn)樗遣话踩摹?在 development 模式下，如果值已經(jīng)出現(xiàn)在全局對(duì)象中則拋出一個(gè)錯(cuò)誤。 但是你可以使用此選項(xiàng)配置 loader 以覆蓋全局對(duì)象中的現(xiàn)有值。

為了強(qiáng)制覆蓋已經(jīng)存在在全局對(duì)象中的現(xiàn)有值，你可以設(shè)置 override 選項(xiàng)值為 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） 給全局對(duì)象。

在瀏覽器中，這些方法可以在 windows._.map(..args)、windows._.filter(...args) 和 windows._.myNameForFind(...args) 下使用。

貢獻(xiàn)

如果你還沒有閱讀，請(qǐng)花一點(diǎn)時(shí)間閱讀我們的貢獻(xiàn)指南。

License

MIT