imports-loader

免责声明 imports-loader是一个由社区成员维护的第三方包，它可能不具备与 webpack 相同的支持、安全策略或许可证，并且不受 webpack 维护。

imports 加载器允许你使用依赖于特定全局变量的模块。

这对于依赖于像 $ 这样的全局变量，或者 this 被期望为 window 对象的第三方模块尤其有用。imports 加载器可以添加必要的 require('whatever') 调用，以便这些模块与 webpack 一起工作。

有关兼容性问题的更多提示，请参阅 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（例如，通过 CLI 或 npm 脚本）。

选项

type
导入
包装器
附加代码

`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`

允许使用对象来描述导入。

属性

syntax:
- 如果 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`

允许指定多个导入。每个项可以是字符串或对象。

示例

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 模块导入，请勿使用此选项。它适用于旧版或非 ESM 兼容的代码。

`boolean`

将代码包装在默认上下文的 IIFE（立即调用函数表达式）中。

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`

将自定义 thisArg 传递给 .call() 上下文。

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`

允许高级控制：指定 this 上下文以及传递给 IIFE 的自定义参数。

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

贡献

我们欢迎贡献！如果您有兴趣帮助改进此加载器，请花点时间阅读我们的贡献指南。

贡献

许可证

« 上一页

imports-loader

入门

内联

使用配置

选项

type

commonjs

module

imports

string

语法

示例

ES 模块默认导入

CommonJS 单一导入

object

示例

array

示例

wrapper

boolean

string

object

带有不同参数名称的 object

additionalCode

示例

定义自定义变量

禁用 AMD 导入语法

贡献

许可证

`type`

`commonjs`

`module`

`imports`

`string`

`语法`

`object`

`array`

`wrapper`

`boolean`

`string`

`object`

带有不同参数名称的 `object`

`additionalCode`