W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
允許對源文件設(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
可以使用 | 或者 %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)出的列表 |
類型:?String
? 默認值:module
生成導(dǎo)出的格式
可選值 - commonjs(CommonJS 模塊語法)和 module(ES 模塊語法)。
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 };
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 };
類型:?String|Array
? 默認值:undefined
導(dǎo)出的列表。
允許使用一個字符串來描述導(dǎo)出。
可以使用 | 或者 %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 語法一起使用。
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;
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 };
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;
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 };
允許使用對象來描述導(dǎo)出。
屬性:
syntax
? - 對于 module 類型(ES modules 模塊格式)可以是 default 或者 named,對于 commonjs 類型(CommonJS 模塊格式)可以是 single 或者 multiple(可以省略)name
? - 導(dǎo)出值的名稱 (required)alias
? - 導(dǎo)出值的別名 (may be omitted)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;
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 };
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;
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 };
允許指定多個導(dǎo)出。 每一個可以是 ?string
? 或者 ?object
?.
? 因為 CommonJS 格式限制,不能將 single 與 multiple 語法一起使用。
? 因為 ES module 格式限制,不能導(dǎo)出多個 default 值。
? 因為 CommonJS 格式限制,不能導(dǎo)出多個 single 值。
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 };
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 };
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 };
如果您還沒有閱讀,請花一點時間閱讀我們的貢獻指南。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: