expose-loader
加载器允许将模块(全部或部分)公开给全局对象(self
、window
和 global
)。
有关兼容性问题的更多提示,请查看官方文档中的 垫片。
首先,你需要安装 expose-loader
npm install expose-loader --save-dev
或
yarn add -D expose-loader
或
pnpm add -D expose-loader
(如果你使用的是 WebPack 4,请安装 expose-loader@1
,并按照 相应的说明 进行操作。)
然后,你可以使用两种方法使用 expose-loader
。
|
或 %20
(空格)允许分隔 expose 的 globalName
、moduleLocalName
和 override
。可以在 此处 阅读文档和语法示例。
警告
%20
是查询字符串中的空格,因为你不能在 URL 中使用空格
import $ from "expose-loader?exposes=$,jQuery!jquery";
//
// Adds the `jquery` to the global object under the names `$` and `jQuery`
import { concat } from "expose-loader?exposes=_.concat!lodash/concat";
//
// Adds the `lodash/concat` to the global object under the name `_.concat`
import {
map,
reduce,
} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
//
// Adds the `map` and `reduce` method from `underscore` to the global object under the name `_.map` and `_.reduce`
src/index.js
import $ from "jquery";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
},
{
test: require.resolve("underscore"),
loader: "expose-loader",
options: {
exposes: [
"_.map|map",
{
globalName: "_.reduce",
moduleLocalName: "reduce",
},
{
globalName: ["_", "filter"],
moduleLocalName: "filter",
},
],
},
},
],
},
};
require.resolve
调用是一个 Node.js 函数(与 webpack 处理中的 require.resolve
无关)。require.resolve
为你提供模块的绝对路径("/.../app/node_modules/jquery/dist/jquery.js"
)。因此,expose 仅适用于 jquery
模块。并且仅在捆绑包中使用时才公开它。
并通过你首选的方法运行 webpack
。
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
暴露 | {String|Object|Array<String|Object>} | 未定义 | expose 列表 |
全局对象 | String | 未定义 | 用于全局上下文的 Object |
exposes
类型
type exposes =
| string
| {
globalName: string | Array<string>;
moduleLocalName?: string;
override?: boolean;
}
| Array<
| string
| {
globalName: string | Array<string>;
moduleLocalName?: string;
override?: boolean;
}
>;
默认值:undefined
expose 列表。
string
允许使用字符串来描述 expose。
syntax
|
或 %20
(空格)允许分隔 expose 的 globalName
、moduleLocalName
和 override
。
字符串语法 - [[globalName] [moduleLocalName] [override]]
或 [[globalName]|[moduleLocalName]|[override]]
,其中
globalName
- 全局对象中的名称,例如浏览器环境中的 window.$
(必需)moduleLocalName
- 模块的方法/变量/等的名称(模块必须导出它)(可以省略)override
- 允许覆盖全局对象中的现有值(可以省略)如果未指定 moduleLocalName
,则将整个模块公开到全局对象,否则仅公开 moduleLocalName
的值。
src/index.js
import $ from "jquery";
import _ from "underscore";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
// For `underscore` library, it can be `_.map map` or `_.map|map`
exposes: "$",
// To access please use `window.$` or `globalThis.$`
},
},
{
// test: require.resolve("jquery"),
test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
loader: "expose-loader",
type: "javascript/auto",
options: {
// For `underscore` library, it can be `_.map map` or `_.map|map`
exposes: "_",
// To access please use `window._` or `globalThis._`
},
},
],
},
};
object
允许使用对象来描述公开。
globalName
类型
type globalName = string | Array<string>;
默认值:undefined
全局对象中的名称。(必需)。
src/index.js
import _ from "underscore";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
loader: "expose-loader",
type: "javascript/auto",
options: {
exposes: {
// Can be `['_', 'filter']`
globalName: "_.filter",
moduleLocalName: "filter",
},
},
},
],
},
};
moduleLocalName
类型
type moduleLocalName = string;
默认值:undefined
模块的方法/变量/等的名称(模块必须导出它)。如果指定了 moduleLocalName
,则仅公开 moduleLocalName
的值。
src/index.js
import _ from "underscore";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
loader: "expose-loader",
type: "javascript/auto",
options: {
exposes: {
globalName: "_.filter",
moduleLocalName: "filter",
},
},
},
],
},
};
override
类型
type override = boolean;
默认值:false
默认情况下,加载器不会覆盖全局对象中的现有值,因为这是不安全的。在 development
模式下,如果全局对象中已存在该值,我们将抛出一个错误。但是,你可以使用此选项配置加载器以覆盖全局对象中的现有值。
若要强制覆盖全局对象中已存在的该值,你可以将 override
选项设置为 true
值。
src/index.js
import $ from "jquery";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: {
globalName: "$",
override: true,
},
},
},
],
},
};
array
src/index.js
import _ from "underscore";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
loader: "expose-loader",
type: "javascript/auto",
options: {
exposes: [
"_.map map",
{
globalName: "_.filter",
moduleLocalName: "filter",
},
{
globalName: ["_", "find"],
moduleLocalName: "myNameForFind",
},
],
},
},
],
},
};
它将仅向全局对象公开 map
、filter
和 find
(在 myNameForFind
名称下)方法。
在浏览器中,这些方法将在 windows._.map(..args)
、windows._.filter(...args)
和 windows._.myNameForFind(...args)
方法下可用。
globalObject
type globalObject = string;
默认值:undefined
用于全局上下文的 Object
import _ from "underscore";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /node_modules[/\\]underscore[/\\]modules[/\\]index-all\.js$/,
loader: "expose-loader",
type: "javascript/auto",
options: {
exposes: [
{
globalName: "_",
},
],
globalObject: "this",
},
},
],
},
};
index.js
import { method1 } from "./my-module.js";
my-module.js
function method1() {
console.log("method1");
}
function method2() {
console.log("method1");
}
export { method1, method2 };
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /my-module\.js$/,
loader: "expose-loader",
options: {
exposes: "mod",
// // To access please use `window.mod` or `globalThis.mod`
},
},
],
},
};
如果您尚未阅读,请花点时间阅读我们的贡献指南。