閱讀(704) 書簽贊(0) 我要糾錯

Webpack imports-loader

2023-05-22 09:18 更新

imports loader 允許使用依賴于特定全局變量的模塊。

這對于依賴 ?window? 對象下的全局變量（比如 ?$? 或 ?this? ）的第三方模塊非常有用。 imports loader 可以添加必要的 ?require('whatever')? 調(diào)用，因此這些模塊可以與 webpack 一起使用。

有關(guān)兼容性問題的進(jìn)一步提示，可以查看官方文檔中的 Shimming。

? 默認(rèn)情況下，loader 生成具名 ES module。

? 請注意，在原始代碼中已存在的 imports（?import/require?）與引入新值會導(dǎo)致失敗。

快速開始

首先，你需要安裝 ?imports-loader?：

$ npm install imports-loader --save-dev

如果你有這個文件：

example.js

$('img').doSomeAwesomeJqueryPluginStuff();

然后你可以使用兩個方法來配置 ?imports-loader?，就可以把 ?jquery? 值注入到模塊中。

內(nèi)聯(lián)

可以使用 ?|? 或者 ?%20?（空格）分隔 import 語句中的 ?syntax?、?moduleName?、?name? 和 ?alias?。

? %20 是查詢字符串中的空格，因為你不能在 URL 中使用空格。

// 可供選擇的語法：
//
// import myLib from 'imports-loader?imports=default%20jquery%20$!./example.js';
//
// `%20` 是查詢字符串中的空格，相當(dāng)于 `default jquery $`
import myLib from 'imports-loader?imports=default|jquery|$!./example.js';
// 在 example.js 的開頭添加如下代碼：
//
// import $ from "jquery";
//
// ...
// Code
// ...

import myLib from 'imports-loader?imports=default|jquery|$,angular!./example.js';
// `|` 是查詢字符串中的分隔符，相當(dāng)于 `default|jquery|$` 與 `angular`
// 在 example.js 的開頭添加如下代碼：
//
// import $ from "jquery";
// import angular from "angular";
//
// ...
// Code
// ...

import myLib from 'imports-loader?imports=named|library|myMethod,angular!./example.js';
// `|` 是查詢字符串中的分隔符，相當(dāng)于 `named|library|myMethod` 與 `angular`
// 在 example.js 的開頭添加如下代碼：
//
// import { myMethod } from "library";
// import angular from "angular";
//
// ...
// Code
// ...

const myLib = require(`imports-loader?type=commonjs&imports=single|jquery|$,angular!./example.js`);
// `|` 是查詢字符串中的分隔符，相當(dāng)于 `single|jquery|$` 與 `angular`
// 在 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`);
// `|` 是查詢字符串中的分隔符，相當(dāng)于 `single|myLib|myMethod` 與 `angular`
// 在 example.js 中添加如下代碼：
//
// const myMethod = require('myLib');
//
// (function () {
// ...
// Code
// ...
// }.call(window));

import myLib from 'imports-loader?additionalCode=var%20myVariable%20=%20false;!./example.js';
// 在 example.js 的開頭添加如下代碼：
//
// var myVariable = false;
//
// ...
// Code
// ...

使用配置項

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 你可以使用 `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

配置項

Name	Type	Default	Description
`type`	`{String}`	`module`	生成 import 的格式
`imports`	`{String\|Object\|Array<String\|Object>}`	`undefined`	import 列表
`wrapper`	`{Boolean\|String\|Object}`	`undefined`	關(guān)閉函數(shù)中的模塊代碼 (`(function () { ... }).call();`)
`additionalCode`	`{String}`	`undefined`	添加自定義代碼

type

類型：?String? 默認(rèn)值：module

生成 exports 的格式。

可選值 ?- commonjs? （CommonJS module 語法）和 module （ES module 語法）。

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

類型：?String|Object|Array<String|Object>? 默認(rèn)值：undefined

import 列表。

String

允許使用字符串描述 export。

Syntax

使用 ?|? 或者 ?%20?（空格）分隔 ?import? 中的 syntax、moduleName、name 與 alias。

字符串語法 - ?[[syntax] [moduleName] [name] [alias]]? 或者 ?[[syntax]|[moduleName]|[name]|[alias]]?，其含義為：

?[syntax]? (可以被省略):如果 type 值為 module- 可以是 default、named、namespace 或者 side-effects，默認(rèn)值為 default。如果 type 值為 commonjs- 可以是 single、multiple 或者 pure，默認(rèn)值為 single。
?[moduleName]? - 被導(dǎo)入模塊的名稱(必填)
?[name]? - 被導(dǎo)入值的名稱(必填)
?[alias]? - 被導(dǎo)入值的別名(可以被省略)

示例：

如果 type 值為 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";.

如果 type 值為 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");.

? 你需要設(shè)置 type: "commonjs" 以使用 single、multiple 與 pure 語法。

? Aliases 不能與 default、namespace、side-effects、single 與 pure 語法同時使用。

示例

ES Module 默認(rèn)導(dǎo)入

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 Single Import

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

允許使用一個對象來描述 ?import?。

屬性：

?syntax?:如果 type 值為 module- 可以是 default、named、namespace 或 side-effects如果 type 值為 commonjs- 可以是 single、multiple或pure`
?moduleName? - 被導(dǎo)入模塊的名稱 (必填)
?name? - 被導(dǎo)入值的名稱 (必填)
?alias? - 被導(dǎo)入值的別名 (可以被省略)

? 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

允許指定多個導(dǎo)入。每一項可以為 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

類型：?Boolean|String|Object? 默認(rèn)值：undefined

用給定的 thisArg 和 args 關(guān)閉函數(shù)中的模塊代碼 ((function () { ... }).call();)。

? 如果源碼中包含 ES module import 的話，請不要使用該配置。

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 with different parameter names

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

類型：?String? 默認(rèn)值：undefined

在模塊代碼之前添加自定義代碼作為前導(dǎo)。

Examples

定義自定義變量

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

Disable AMD Import Syntax

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

Contributing

如果你還沒有閱讀，請花一點時間閱讀我們的貢獻(xiàn)指南。

License

MIT

以上內(nèi)容是否對您有幫助：

← Webpack html-loader

Webpack less-loader →

寫筆記

我要補充