exports-loader

免責聲明： exports-loader 是由社群成員維護的第三方套件，它可能沒有與 webpack 相同的支援、安全政策或授權，且並非由 webpack 維護。

允許為原始檔設定 exports module.exports/export。

當原始檔不包含 exports 或某些東西未匯出時，這很有用。

有關相容性問題的更多提示，請查看官方文件中的 Shimming。

警告
預設情況下，載入器會產生名為 ES 模組的語法。

警告
請小心，原始程式碼中現有的 exports (export/module.exports/exports) 和匯出新值可能會導致失敗。

入門

首先，您需要安裝 exports-loader

npm install exports-loader --save-dev

或

yarn add -D exports-loader

或

pnpm add -D exports-loader

內嵌

| 或 %20 (空白) 允許分隔匯出的 syntax、name 和 alias。文件和語法範例可在此處閱讀。

警告
%20 是查詢字串中的空白，因為您無法在 URL 中使用空白

然後將載入器新增至所需的 import 陳述式或 require 呼叫。例如

import { myFunction } from "exports-loader?exports=myFunction!./file.js";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myFunction }

myFunction("Hello world");

import {
  myVariable,
  myFunction,
} from "exports-loader?exports=myVariable,myFunction!./file.js";
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// export { myVariable, myFunction };

const newVariable = myVariable + "!!!";

console.log(newVariable);

myFunction("Hello world");

const {
  myFunction,
} = require("exports-loader?type=commonjs&exports=myFunction!./file.js");
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// module.exports = { myFunction }

myFunction("Hello world");

// Alternative syntax:
// import myFunction from 'exports-loader?exports=default%20myFunction!./file.js';
import myFunction from "exports-loader?exports=default|myFunction!./file.js";
// `%20` is space in a query string, equivalently `default myFunction`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// exports default myFunction;

myFunction("Hello world");

const myFunction = require("exports-loader?type=commonjs&exports=single|myFunction!./file.js");
// `|` is separator in a query string, equivalently `single|myFunction`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// module.exports = myFunction;

myFunction("Hello world");

import { myFunctionAlias } from "exports-loader?exports=named|myFunction|myFunctionAlias!./file.js";
// `|` is separator in a query string, equivalently `named|myFunction|myFunctionAlias`
// Adds the following code to the file's source:
//
// ...
// Code
// ...
//
// exports { myFunction as myFunctionAlias };

myFunctionAlias("Hello world");

字串值的說明可在以下文件找到。

使用組態

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // You can use `regexp`
        // test: /vendor\.js/$
        test: require.resolve("./path/to/vendor.js"),
        loader: "exports-loader",
        options: {
          exports: "myFunction",
        },
      },
    ],
  },
};

並透過您偏好的方法執行 webpack。

選項

名稱	類型	預設值	說明
`類型`	`{字串}`	`module`	產生 exports 的格式
`匯出`	`{字串\|物件\|字串陣列<字串\|物件>}`	`未定義`	匯出清單

`type`

類型：字串 預設值：module

已產生匯出的格式。

可能值 - 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",
        },
      },
    ],
  },
};

產生輸出

// ...
// 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",
        },
      },
    ],
  },
};

產生輸出

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

export { Foo };

`exports`

類型：字串|陣列 預設值：未定義

匯出清單。

`字串`

允許使用字串來描述匯出。

`語法`

| 或 %20（空白）允許分隔匯出的 syntax、name 和 alias。

字串語法 - [[syntax] [name] [alias]] 或 [[syntax]|[name]|[alias]]，其中

[syntax]（可以省略） -
- 如果 type 是 module - 可以是 default 和 named，
- 如果 type 是 commonjs - 可以是 single 和 multiple
[name] - 匯出值的變數名稱（必填）
[alias] - 匯出值的別名（可以省略）

範例

[Foo] - 產生 export { Foo };。
[default Foo] - 產生 export default Foo;。
[named Foo] - 產生 export { Foo };。
[命名 Foo FooA] - 產生 export { Foo as FooA };。
[單一 Foo] - 產生 module.exports = Foo;。
[多重 Foo] - 產生 module.exports = { Foo };。
[多重 Foo FooA] - 產生 module.exports = { 'FooA': Foo };。
[命名 [名稱] [名稱]別名] - 產生具有名稱的 ES 模組，並在其他名稱下輸出等於檔案名稱的值，對於 single.js，它將會是 single 和 singleAlias，產生 export { single as singleAlias };。

警告
您需要設定 type: "commonjs" 來使用 single 或 multiple 語法。

警告
別名不能與 default 或 single 語法一起使用。

範例

ES 模組預設輸出

webpack.config.js

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

產生輸出

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

export default Foo;

ES 模組命名輸出

webpack.config.js

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

產生輸出

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

export { Foo as FooA };

CommonJS 單一輸出

webpack.config.js

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

產生輸出

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

module.exports = Foo;

CommonJS 多重輸出

webpack.config.js

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

產生輸出

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

module.exports = { FooA: Foo };

`物件`

允許使用物件來描述輸出。

屬性

syntax - 對於 module 類型（ES 模組 模組格式），可以是 default 或 named，對於 commonjs 類型（CommonJS 模組格式），可以是 single 或 multiple（可以省略）
name - 輸出的值的名稱（必填）
alias - 輸出的值的別名（可以省略）

範例

ES 模組預設匯出

webpack.config.js

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

產生輸出

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

export default Foo;

ES 模組命名匯出

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",
          },
        },
      },
    ],
  },
};

產生輸出

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

export { Foo as FooA };

CommonJS 單一匯出

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",
          },
        },
      },
    ],
  },
};

產生輸出

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

module.exports = Foo;

CommonJS 多重匯出

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",
          },
        },
      },
    ],
  },
};

產生輸出

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

module.exports = { FooA: Foo };

`陣列`

允許指定多重匯出。每個項目可以是 字串 或 物件。

警告
由於 CommonJS 格式限制，無法同時使用 單一 和 多重 語法。

警告
由於 ES 模組格式限制，無法使用多個 預設 值。

警告
由於 CommonJS 格式限制，無法使用多個 單一 值。

範例

CommonJS 多重匯出

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"],
        },
      },
    ],
  },
};

產生輸出

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

module.exports = { Foo, Bar, BazA: Bar };

ES 模組預設匯出與命名匯出同時使用

webpack.config.js

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

產生輸出

// ...
// 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",
          ],
        },
      },
    ],
  },
};

產生輸出

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

export { Foo as FooA, Bar, Baz };

貢獻

如果您尚未閱讀，請花點時間閱讀我們的貢獻指南。

貢獻

授權

« 上一頁