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をインストールし、代わりに対応する手順に従ってください。)

次に、2つの方法を使用してexpose-loaderを使用できます。

インライン

|または%20（スペース）を使用すると、exposeのglobalName、moduleLocalName、overrideを区切ることができます。ドキュメントと構文の例はこちらで確認できます。

警告

URLにはスペースを使用できないため、%20はクエリ文字列のスペースです。

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を実行します。

オプション

exposes

型

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

デフォルト: undefined

公開リスト。

string

文字列を使用して公開を記述できます。

構文

|または%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