exports-loader

ソースファイルのエクスポート`module.exports`/`export`を設定できます。

ソースファイルにエクスポートが含まれていない場合、または何かがエクスポートされない場合に役立ちます。

互換性の問題に関するヒントについては、公式ドキュメントのシミングをご覧ください。

警告

デフォルトでは、ローダーはESモジュール named 構文を生成します。

警告

注意してください。元のコードに既存のエクスポート（`export`/`module.exports`/`exports`）があり、新しい値をエクスポートすると、エラーが発生する可能性があります。

はじめに

まず、`exports-loader`をインストールする必要があります

npm install exports-loader --save-dev

または

yarn add -D exports-loader

または

pnpm add -D exports-loader

インライン

`|`または`%20`（スペース）を使用すると、エクスポートの`syntax`、`name`、および`alias`を区切ることができます。ドキュメントと構文の例はこちらで読むことができます。

警告

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

次に、目的の`import`ステートメントまたは`require`呼び出しにローダーを追加します。例えば

import { myFunction } from "exports-loader?exports=myFunction!./file.js";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myFunction }

myFunction("Hello world");

import {
  myVariable,
  myFunction,
} from "exports-loader?exports=myVariable,myFunction!./file.js";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myVariable, myFunction };

const newVariable = myVariable + "!!!";

console.log(newVariable);

myFunction("Hello world");

const {
  myFunction,
} = require("exports-loader?type=commonjs&exports=myFunction!./file.js");
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// module.exports = { myFunction }

myFunction("Hello world");

// Alternative syntax:
// import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
import myFunction from "exports-loader?exports=default|myFunction!./file.js";
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// exports default myFunction;

myFunction("Hello world");

const myFunction = require("exports-loader?type=commonjs&exports=single|myFunction!./file.js");
// `|` is separator in a query string, equivalently `single|myFunction`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// module.exports = myFunction;

myFunction("Hello world");

import { myFunctionAlias } from "exports-loader?exports=named|myFunction|myFunctionAlias!./file.js";
// `|` is separator in a query string, equivalently `named|myFunction|myFunctionAlias`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// exports { myFunction as myFunctionAlias };

myFunctionAlias("Hello world");

文字列値の説明は、以下のドキュメントにあります。

設定の使用

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // You can use `regexp`
        // test: /vendor\.js/$
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "myFunction",
        },
      },
    ],
  },
};

そして、好みの方法で`webpack`を実行します。

オプション

`type`

タイプ：`String` デフォルト：`module`

生成されたエクスポートの形式。

可能な値 - `commonjs`（CommonJSモジュール構文）および`module`（ESモジュール構文）。

`commonjs`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: "Foo",
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

module.exports = { Foo };

`module`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "module",
          exports: "Foo",
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export { Foo };

`exports`

タイプ：`String|Array` デフォルト：`undefined`

エクスポートのリスト。

`String`

文字列を使用してエクスポートを記述できます。

`Syntax`

`|`または`%20`（スペース）を使用すると、エクスポートの`syntax`、`name`、および`alias`を区切ることができます。

文字列構文 - `[[syntax] [name] [alias]]`または`[[syntax]|[name]|[alias]]`、ここで

• `[syntax]`（**省略可能**） -

  • `type`が`module`の場合- `default`および`named`にすることができます。
  • `type`が`commonjs`の場合- `single`および`multiple`にすることができます

• `[name]` - エクスポートされた値の名前（**必須**）

• `[alias]` - エクスポートされた値のエイリアス（**省略可能**）

例

• `[Foo]` - `export { Foo };`を生成します。
• `[default Foo]` - `export default Foo;`を生成します。
• `[named Foo]` - `export { Foo };`を生成します。
• `[named Foo FooA]` - `export { Foo as FooA };`を生成します。
• `[single Foo]` - `module.exports = Foo;`を生成します。
• `[multiple Foo]` - `module.exports = { Foo };`を生成します。
• `[multiple Foo FooA]` - `module.exports = { 'FooA': Foo };`を生成します。
• [named [name] [name]Alias] - ESモジュールとして名前付きエクスポートを生成し、ファイル名と同じ値を別の名前でエクスポートします。 例えば、single.js の場合、single と singleAlias がエクスポートされ、export { single as singleAlias }; が生成されます。

警告

single または multiple 構文を使用するには、type: "commonjs" を設定する必要があります。

警告

エイリアスは、default または single 構文と一緒に使用することはできません。

例

ESモジュール デフォルトエクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "default Foo",
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export default Foo;

ESモジュール 名前付きエクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "named Foo FooA",
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export { Foo as FooA };

CommonJS 単一エクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: "single Foo",
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

module.exports = Foo;

CommonJS 複数エクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: "multiple Foo FooA",
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

module.exports = { FooA: Foo };

オブジェクト

エクスポートを記述するためのオブジェクトの使用を許可します。

プロパティ

• syntax - module タイプ (ES modules モジュール形式) の場合は default または named、commonjs タイプ (CommonJS モジュール形式) の場合は single または multiple を指定できます (**省略可能**)
• name - エクスポートされる値の名前 (**必須**)
• alias - エクスポートされる値のエイリアス (**省略可能**)

例

ESモジュール デフォルトエクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: {
            syntax: "default",
            name: "Foo",
          },
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export default Foo;

ESモジュール 名前付きエクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: {
            syntax: "named",
            name: "Foo",
            alias: "FooA",
          },
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export { Foo as FooA };

CommonJS 単一エクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: {
            syntax: "single",
            name: "Foo",
          },
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

module.exports = Foo;

CommonJS 複数エクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: {
            syntax: "multiple",
            name: "Foo",
            alias: "FooA",
          },
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

module.exports = { FooA: Foo };

配列

複数のエクスポートを指定できます。 各項目は文字列またはオブジェクトです。

警告

CommonJS 形式の制限により、single と multiple 構文を一緒に使用することはできません。

警告

ESモジュール形式の制限により、複数の default 値を使用することはできません。

警告

CommonJS 形式の制限により、複数の single 値を使用することはできません。

例

CommonJS 複数エクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          type: "commonjs",
          exports: ["Foo", "multiple Bar", "multiple Baz BazA"],
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

module.exports = { Foo, Bar, BazA: Bar };

ESモジュール デフォルトエクスポートと名前付きエクスポートの同時使用

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: ["default Foo", "named Bar BarA"],
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export default Foo;
export { Bar as BarA };

名前付きエクスポート

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: [
            { syntax: "named", name: "Foo", alias: "FooA" },
            { syntax: "named", name: "Bar" },
            "Baz",
          ],
        },
      },
    ],
  },
};

出力を生成する

// ...
// Code
// ...

export { Foo as FooA, Bar, Baz };

コントリビューション

まだコントリビューションガイドラインを読んでいない場合は、読んでください。

コントリビューションガイドライン

ライセンス

MIT