imports-loader

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

npm node tests cover discussion size

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

这对于依赖全局变量(如 $thiswindow 对象)的第三方模块很有用。imports 加载器可以添加必要的 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(空格)允许分隔导入的 syntaxmoduleNamenamealias。文档和语法示例可在此处阅读 here

警告

%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

允许使用字符串来描述导出。

Syntax

|%20(空格)允许分隔导入的 syntaxmoduleNamenamealias

字符串语法 - [[syntax] [moduleName] [name] [alias]][[syntax]|[moduleName]|[name]|[alias]],其中

  • [syntax]可以省略

    • 如果 typemodule - 可以是 defaultnamednamespaceside-effects,默认值为 default
    • 如果 typecommonjs - 可以是 singlemultiplepure,默认值为 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" 才能使用 singlemultiplepure 语法。

警告

别名不能与 defaultnamespaceside-effectssinglepure 语法一起使用。

示例
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

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

属性

  • 语法:

    • 如果 typemodule - 可以是 defaultnamednamespaceside-effects
    • 如果 typecommonjs - 可以是 singlemultiplepure
  • moduleName - 导入模块的名称(必需

  • name - 导入值的名称(必需

  • alias - 导入值的别名(可以省略

警告

别名不能与 defaultnamespaceside-effectssinglepure 语法一起使用。

示例

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

允许指定多个导入。每个项目可以是 stringobject

示例

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

使用给定的 thisArgargs(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
// ...

贡献

如果您尚未阅读,请花点时间阅读我们的贡献指南。

贡献

许可证

MIT