Webpack exports-loader

2023-05-22 09:43 更新

允許對源文件設(shè)置 ?module.exports?/?export?。

當源文件不包含 exports 或者有一些內(nèi)容沒有 export 時是有用的。

想要獲取有關(guān)兼容性的進一步提示，請查看官方文檔中的 Shimming。

? 默認情況下，loader 生成具名的 ES module。? 請注意，原始代碼中現(xiàn)有的 exports（export/module.exports/exports）和導(dǎo)出新值可能會導(dǎo)致失敗。

快速開始

首先，你需要安裝 exports-loader：

$ npm install exports-loader --save-dev

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

可以使用 | 或者 %20（空格）分隔 export 中的 syntax，name 和 alias。

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

然后將 loader 添加到所需的 import 語句或 require 調(diào)用中。例如：

import { myFunction } from 'exports-loader?exports=myFunction!./file.js';
// 向源文件中添加如下代碼：
//
// ...
// Code
// ...
//
// export { myFunction }

myFunction('Hello world');
import {
  myVariable,
  myFunction,
} from 'exports-loader?exports=myVariable,myFunction!./file.js';
// 向源文件中添加如下代碼：
//
// ...
// Code
// ...
//
// export { myVariable, myFunction };

const newVariable = myVariable + '!!!';

console.log(newVariable);

myFunction('Hello world');
const {
  myFunction,
} = require('exports-loader?type=commonjs&exports=myFunction!./file.js');
// 向源文件中添加如下代碼：
//
// ...
// Code
// ...
//
// module.exports = { myFunction }

myFunction('Hello world');
// 替換語法：
// import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
import myFunction from 'exports-loader?exports=default|myFunction!./file.js';
// `%20` 是查詢字符串中的空格，等同于 `default myFunction`
// 向源文件中添加如下代碼：
//
// ...
// Code
// ...
//
// exports default myFunction;

myFunction('Hello world');
const myFunction = require('exports-loader?type=commonjs&exports=single|myFunction!./file.js');
// `|` 是查詢字符串中的分隔符， 等同于 `single|myFunction`
// 向源文件中添加如下代碼：
//
// ...
// Code
// ...
//
// module.exports = myFunction;

myFunction('Hello world');
import { myFunctionAlias } from 'exports-loader?exports=named|myFunction|myFunctionAlias!./file.js';
// `|` 是查詢字符串中的分隔符， 等同于 `named|myFunction|myFunctionAlias`
// 向源文件中添加如下代碼：
//
// ...
// Code
// ...
//
// exports { myFunction as myFunctionAlias };

myFunctionAlias('Hello world');

可以在下面的文檔中找到字段值的含義。

使用配置文件

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // 你可以使用 `regexp`
        // test: /vendor\.js/$
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'myFunction',
        },
      },
    ],
  },
};

然后用你喜歡的方式運行 webpack。

配置項

Name Type Default Description
type {String} module 生成導(dǎo)出的格式
exports {String|Object|Array<String|Object>} undefined 導(dǎo)出的列表

type

類型：?String? 默認值：module

生成導(dǎo)出的格式

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

commonjs

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'Foo',
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

module.exports = { Foo };

module

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'module',
          exports: 'Foo',
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export { Foo };

exports

類型：?String|Array? 默認值：undefined

導(dǎo)出的列表。

String

允許使用一個字符串來描述導(dǎo)出。

Syntax

可以使用 | 或者 %20（空格）分隔 export 中的 syntax，name 和 alias。

字符串語法 - [[syntax] [name] [alias]] 或者 [[syntax]|[name]|[alias]]，含義如下：

  • ?[syntax]? (可以省略) -如果 type 為 module- 可以是 default 和 named,如果 type 為 commonjs- 可以使 single 和 multiple
  • ?[name]? - 導(dǎo)出值的名稱 (必填項)
  • ?[alias]? - 導(dǎo)出值的別名 (可以省略)

Examples:

  • ?[Foo]? - 生成 export { Foo };.
  • ?[default Foo]? - 生成 export default Foo;.
  • ?[named Foo]? - 生成 export { Foo };.
  • ?[named Foo FooA]? - 生成 export { Foo as FooA };.
  • ?[single Foo]? - 生成 module.exports = Foo;.
  • ?[multiple Foo]? - 生成 module.exports = { Foo };.
  • ?[multiple Foo FooA]? - 生成 module.exports = { 'FooA': Foo };.
  • ?[named [name] [name]Alias]? - 生成名為 exports 的 ES 模塊，并導(dǎo)出等于另一個名稱下的文件名的值., 對于 single.js 將會是 single and 和singleAlias, 生成 export { single as singleAlias };.
? 你需要設(shè)置 type: "commonjs" 才能使用 single 或者 multiple 語法。
? 別名不能與 default 或者 single 語法一起使用。
示例
ES Module Default Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'default Foo',
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export default Foo;
ES Module Named Exports

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: 'named Foo FooA',
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export { Foo as FooA };
CommonJS Single Export

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'single Foo',
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

module.exports = Foo;
CommonJS 導(dǎo)出多個

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: 'multiple Foo FooA',
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

module.exports = { FooA: Foo };

Object

允許使用對象來描述導(dǎo)出。

屬性：

  • ?syntax? - 對于 module 類型（ES modules 模塊格式）可以是 default 或者 named，對于 commonjs 類型（CommonJS 模塊格式）可以是 single 或者 multiple（可以省略）
  • ?name? - 導(dǎo)出值的名稱 (required)
  • ?alias? - 導(dǎo)出值的別名 (may be omitted)
示例
ES Module 默認導(dǎo)出

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: {
            syntax: 'default',
            name: 'Foo',
          },
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export default Foo;
ES Module 重命名導(dǎo)出

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: {
            syntax: 'named',
            name: 'Foo',
            alias: 'FooA',
          },
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export { Foo as FooA };
CommonJS 單個導(dǎo)出

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: {
            syntax: 'single',
            name: 'Foo',
          },
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

module.exports = Foo;
CommonJS 導(dǎo)出多個

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: {
            syntax: 'multiple',
            name: 'Foo',
            alias: 'FooA',
          },
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

module.exports = { FooA: Foo };

Array

允許指定多個導(dǎo)出。 每一個可以是 ?string? 或者 ?object?.

? 因為 CommonJS 格式限制，不能將 single 與 multiple 語法一起使用。
? 因為 ES module 格式限制，不能導(dǎo)出多個 default 值。
? 因為 CommonJS 格式限制，不能導(dǎo)出多個 single 值。
示例
CommonJS 導(dǎo)出多個

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          type: 'commonjs',
          exports: ['Foo', 'multiple Bar', 'multiple Baz BazA'],
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

module.exports = { Foo, Bar, BazA: Bar };
ES 默認導(dǎo)出與導(dǎo)出重命名

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: ['default Foo', 'named Bar BarA'],
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export default Foo;
export { Bar as BarA };
導(dǎo)出重命名

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('./path/to/vendor.js'),
        loader: 'exports-loader',
        options: {
          exports: [
            { syntax: 'named', name: 'Foo', alias: 'FooA' },
            { syntax: 'named', name: 'Bar' },
            'Baz',
          ],
        },
      },
    ],
  },
};

生成的輸出結(jié)果：

// ...
// Code
// ...

export { Foo as FooA, Bar, Baz };

貢獻

如果您還沒有閱讀，請花一點時間閱讀我們的貢獻指南。

License

MIT


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號