imports-loader

免責事項 imports-loaderはコミュニティメンバーによって維持されているサードパーティパッケージであり、webpack と同じサポート、セキュリティポリシー、またはライセンスを持たない可能性があり、webpack によって維持されていません。

imports ローダーを使用すると、特定のグローバル変数に依存するモジュールを使用できます。

これは、$ や this などのグローバル変数が window オブジェクトであることに依存するサードパーティモジュールに役立ちます。 imports ローダーは必要な require('whatever') 呼び出しを追加できるため、これらのモジュールは webpack で動作します。

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

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

警告
注意してください。元のコードに既存のインポート (import/require) があり、新しい値をインポートすると、エラーが発生する可能性があります。

はじめに

始めるには、imports-loader をインストールする必要があります

npm install imports-loader --save-dev

または

yarn add -D imports-loader

または

pnpm add -D imports-loader

このファイルがあるとします

example.js

$("img").doSomeAwesomeJqueryPluginStuff();

次に、2 つのアプローチを使用して imports-loader を設定することで、jquery 値をモジュールに挿入できます。

インライン

| または %20 (スペース) を使用すると、インポートの `構文`、`モジュール名`、`名前`、`エイリアス` を区切ることができます。ドキュメントと構文の例はこちらで読むことができます。

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

// Alternative syntax:
//
// import myLib from 'imports-loader?imports=default%20jquery%20$!./example.js';
//
// `%20` is space in a query string, equivalently `default jquery $`
import myLib from "imports-loader?imports=default|jquery|$!./example.js";
// Adds the following code to the beginning of example.js:
//
// import $ from "jquery";
//
// ...
// Code
// ...

import myLib from "imports-loader?imports=default|jquery|$,angular!./example.js";
// `|` is separator in a query string, equivalently `default|jquery|$` and `angular`
// Adds the following code to the beginning of example.js:
//
// import $ from "jquery";
// import angular from "angular";
//
// ...
// Code
// ...

import myLib from "imports-loader?imports=named|library|myMethod,angular!./example.js";
// `|` is separator in a query string, equivalently `named|library|myMethod` and `angular`
// Adds the following code to the beginning of example.js:
//
// import { myMethod } from "library";
// import angular from "angular";
//
// ...
// Code
// ...

const myLib = require(
  `imports-loader?type=commonjs&imports=single|jquery|$,angular!./example.js`,
);
// `|` is separator in a query string, equivalently `single|jquery|$` and `angular`
// Adds the following code to the beginning of example.js:
//
// var $ = require("jquery");
// var angular = require("angular");
//
// ...
// Code
// ...

const myLib = require(
  `imports-loader?type=commonjs&imports=single|myLib|myMethod&wrapper=window&!./example.js`,
);
// `|` is separator in a query string, equivalently `single|myLib|myMethod` and `angular`
// Adds the following code to the example.js:
//
// const myMethod = require('myLib');
//
// (function () {
// ...
// Code
// ...
// }.call(window));

import myLib from "imports-loader?additionalCode=var%20myVariable%20=%20false;!./example.js";
// Adds the following code to the beginning of example.js:
//
// var myVariable = false;
//
// ...
// Code
// ...

設定の使用

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // You can use `regexp`
        // test: /example\.js$/
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: [
                "default jquery $",
                "default lib_2 lib_2_default",
                "named lib_3 lib2_method_1",
                "named lib_3 lib2_method_2 lib_2_method_2_short",
                "namespace lib_4 my_namespace",
                "side-effects lib_5",
                {
                  syntax: "default",
                  moduleName: "angular",
                  name: "angular",
                },
              ],
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";
import lib_2_default from "lib_2";
import { lib2_method_1, lib2_method_2 as lib_2_method_2_short } from "lib_3";
import * as my_namespace from "lib_4";
import "lib_5";
import angular from "angular";

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

`type`

タイプ

type type = string;

デフォルト: module

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

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

`commonjs`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        loader: "imports-loader",
        options: {
          syntax: "default",
          type: "commonjs",
          imports: "Foo",
        },
      },
    ],
  },
};

出力を生成する

var Foo = require("Foo");

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

`module`

webpack.config.js

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

出力を生成する

import Foo from "Foo";

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

`imports`

タイプ

type imports =
  | string
  | {
      syntax:
        | "default"
        | "named"
        | "namespace"
        | "side-effects"
        | "single"
        | "multiple"
        | "pure";
      moduleName: string;
      name: string;
      alias: string;
    }
  | Array<
      | string
      | {
          syntax:
            | "default"
            | "named"
            | "namespace"
            | "side-effects"
            | "single"
            | "multiple"
            | "pure";
          moduleName: string;
          name: string;
          alias: string;
        }
    >;

デフォルト: `undefined`

インポートのリスト。

`string`

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

`構文`

| または %20 (スペース) を使用すると、インポートの `構文`、`モジュール名`、`名前`、`エイリアス` を区切ることができます。

文字列構文 - [[構文] [モジュール名] [名前] [エイリアス]] または `[[構文]|[モジュール名]|[名前]|[エイリアス]]`。ここで、

[構文] (**省略可能**)
- `type` が `module` の場合 - `default`、`named`、`namespace`、または `side-effects` を使用できます。デフォルト値は `default` です。
- `type` が `commonjs` の場合 - `single`、`multiple`、または `pure` を使用できます。デフォルト値は `single` です。
[モジュール名] - インポートされたモジュールの名前 (**必須**)
[名前] - インポートされた値の名前 (**必須**)
[エイリアス] - インポートされた値のエイリアス (**省略可能**)

例

タイプが `module` の場合

[Foo] - `import Foo from "Foo";` を生成します。
[default Foo] - `import Foo from "Foo";` を生成します。
[default ./my-lib Foo] - `import Foo from "./my-lib";` を生成します。
[named Foo FooA] - `import { FooA } from "Foo";` を生成します。
[named Foo FooA Bar] - `import { FooA as Bar } from "Foo";` を生成します。
[namespace Foo FooA] - `import * as FooA from "Foo";` を生成します。
[side-effects Foo] - `import "Foo";` を生成します。

タイプが `commonjs` の場合

[Foo] - `const Foo = require("Foo");` を生成します。
[single Foo] - `const Foo = require("Foo");` を生成します。
[single ./my-lib Foo] - `const Foo = require("./my-lib");` を生成します。
[multiple Foo FooA Bar] - `const { FooA: Bar } = require("Foo");` を生成します。
[pure Foo] - `require("Foo");` を生成します。

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

警告
エイリアスは、default、namespace、side-effects、single、pure 構文と同時に使用することはできません。

例

ES モジュールデフォルトインポート

webpack.config.js

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

出力を生成する

import myName from "lib";

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

CommonJS シングルインポート

webpack.config.js

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

出力を生成する

var myName = require("lib");

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

`object`

インポートを記述するためにオブジェクトを使用できます。

プロパティ

構文:
- type が module の場合 - default、named、namespace、または side-effects を使用できます
- type が commonjs の場合 - single、multiple、または pure を使用できます
moduleName - インポートされるモジュールの名前（**必須**）
name - インポートされる値の名前（**必須**）
alias - インポートされる値のエイリアス（**省略可能**）

警告
エイリアスは、default、namespace、side-effects、single、pure 構文と同時に使用することはできません。

例

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                syntax: "named",
                moduleName: "lib_2",
                name: "lib2_method_2",
                alias: "lib_2_method_2_alias",
              },
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import { lib2_method_2 as lib_2_method_2_alias } from "lib_2";

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

`array`

複数のインポートを指定できます。各項目は、string または object を使用できます。

例

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: [
                {
                  moduleName: "angular",
                },
                {
                  syntax: "default",
                  moduleName: "jquery",
                  name: "$",
                },
                "default lib_2 lib_2_default",
                "named lib_2 lib2_method_1",
                "named lib_2 lib2_method_2 lib_2_method_2_alias",
                "namespace lib_3 lib_3_all",
                "side-effects lib_4",
              ],
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import angular from "angular";
import $ from "jquery";
import lib_2_default from "lib_2";
import { lib2_method_1, lib2_method_2 as lib_2_method_2_alias } from "lib_2";
import * as lib_3_all from "lib_3";
import "lib_4";

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

`wrapper`

タイプ

type wrapper =
  | boolean
  | string
  | {
      thisArg: string;
      args: Record<string, string> | Array<string>;
    };

デフォルト: `undefined`

モジュールコードを指定された thisArg と args を持つ関数で囲みます（(function () { ... }).call();）。

警告
ソースコードに ES モジュールインポートが含まれている場合は、このオプションを使用しないでください。

`boolean`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: "jquery",
                name: "$",
              },
              wrapper: true,
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";

(function () {
  // ...
  // Code
  // ...
}).call();

`string`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: "jquery",
                name: "$",
              },
              wrapper: "window",
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";

(function () {
  // ...
  // Code
  // ...
}).call(window);

`object`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: "jquery",
                name: "$",
              },
              wrapper: {
                thisArg: "window",
                args: ["myVariable", "myOtherVariable"],
              },
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";

(function (myVariable, myOtherVariable) {
  // ...
  // Code
  // ...
}).call(window, myVariable, myOtherVariable);

異なるパラメータ名を持つ `object`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: "jquery",
                name: "$",
              },
              wrapper: {
                thisArg: "window",
                args: {
                  myVariable: "var1",
                  myOtherVariable: "var2",
                },
              },
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";

(function (var1, var2) {
  // ...
  // Code
  // ...
}).call(window, myVariable, myOtherVariable);

`additionalCode`

タイプ

type additionalCode = string;

デフォルト: `undefined`

モジュールのコードの前に、カスタムコードをプリアンブルとして追加します。

例

カスタム変数を定義する

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: "jquery",
                name: "$",
              },
              additionalCode: "var myVariable = false;",
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";

var myVariable = false;

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

AMD インポート構文を無効にする

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("example.js"),
        use: [
          {
            loader: "imports-loader",
            options: {
              imports: {
                moduleName: "jquery",
                name: "$",
              },
              additionalCode:
                "var define = false; /* Disable AMD for misbehaving libraries */",
            },
          },
        ],
      },
    ],
  },
};

出力を生成する

import $ from "jquery";

var define = false; /* Disable AMD for misbehaving libraries */

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

貢献

まだ contribution ガイドラインをお読みでない場合は、お読みください。

貢献ガイドライン

ライセンス

MIT

このページを編集·このページを印刷·リポジトリに移動

« 前へ

html-loader

node-loader

imports-loader

はじめに

インライン

設定の使用

オプション

type

commonjs

module

imports

string

構文

例

ES モジュール デフォルトインポート

CommonJS シングルインポート

object

例

array

例

wrapper

boolean

string

object

異なるパラメータ名を持つ object

additionalCode

例

カスタム変数を定義する

AMD インポート構文を無効にする

貢献

ライセンス

`type`

`commonjs`

`module`

`imports`

`string`

`構文`

ES モジュールデフォルトインポート

`object`

`array`

`wrapper`

`boolean`

`string`

`object`

異なるパラメータ名を持つ `object`

`additionalCode`