imports 加载器允许您使用依赖于特定全局变量的模块。
这对于依赖全局变量(如 $
或 this
是 window
对象)的第三方模块很有用。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
(空格)允许分隔导入的 syntax
、moduleName
、name
和 alias
。文档和语法示例可在此处阅读 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
(空格)允许分隔导入的 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
语法一起使用。
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
// ...
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
// ...
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
// ...
如果您尚未阅读,请花点时间阅读我们的贡献指南。