imports-loader

免責聲明： imports-loader 是由社群成員維護的第三方套件，它可能沒有與 webpack 相同的支援、安全政策或授權，且並非由 webpack 維護。

imports loader 允許您使用依賴特定全域變數的模組。

這對於依賴全域變數（例如 $ 或 this 為 window 物件）的第三方模組很有用。imports loader 可以新增必要的 require('whatever') 呼叫，讓這些模組可以使用 webpack。

有關相容性問題的更多提示，請查看官方文件中的Shimming。

警告
預設載入器會產生名為語法的 ES 模組。

警告
請小心，原始程式碼中的現有匯入（import/require）和匯入新值可能會導致失敗。

入門

首先，您需要安裝 imports-loader

npm install imports-loader --save-dev

或

yarn add -D imports-loader

或

pnpm add -D imports-loader

假設您有這個檔案

example.js

$("img").doSomeAwesomeJqueryPluginStuff();

接著，您可以透過使用兩種方法設定 imports-loader，將 jquery 值注入模組中。

內嵌

| 或 %20（空白）允許將匯入的 syntax、moduleName、name 和 alias 分開。文件和語法範例可以在此閱讀。

警告
%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。

選項

類型
匯入
包裝器
additionalCode

`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（空格）允許分隔匯入的 syntax、moduleName、name 和 alias。

字串語法 - [[syntax] [moduleName] [name] [alias]] 或 [[syntax]|[moduleName]|[name]|[alias]]，其中

[syntax]（可以省略）
- 如果 type 是 module，可以是 default、named、namespace 或 side-effects，預設值為 default。
- 如果 type 是 commonjs，可以是 single、multiple 或 pure，預設值為 single。
[moduleName] - 匯入模組的名稱（必要）
[name] - 匯入值的的名稱（必要）
[alias] - 匯入值的別名（可以省略）

範例

如果類型為 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");。

警告
您需要設定 type: "commonjs" 才能使用 single、multiple 和 pure 語法。

警告
別名不能與 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 Import 語法

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
// ...

貢獻

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

貢獻

授權

« 上一頁

imports-loader

入門

內嵌

使用設定

選項

type

commonjs

module

imports

string

語法

範例

ES 模組預設匯入

CommonJS 單一匯入

object

範例

array

範例

wrapper

boolean

string

object

object 具有不同的參數名稱

additionalCode

範例

定義自訂變數

停用 AMD Import 語法

貢獻

授權

`type`

`commonjs`

`module`

`imports`

`string`

`語法`

`object`

`array`

`wrapper`

`boolean`

`string`

`object`

`object` 具有不同的參數名稱

`additionalCode`