Webpack expose-loader
expose-loader 允许暴露一个模块（整体或者部分）给全局对象（self、window 和 global）。
想要获取有关兼容性的进一步提示，请查看官方文档中的 Shimming。
快速开始
首先，你需要安装 expose-loader：
$ npm install expose-loader --save-dev
（如果你在使用 webpack4，请安装 expose-loader@1 并按照 相应说明 进行配置。）
然后你可以用两种方法来用 expose-loader。
内联
可以使用 | 或者 %20（空格）分隔 expose 中的 globalName、moduleLocalName 和 override。
⚠ %20 是查询字符串中的空格，因为你不能在 URL 中使用空格
import $ from "expose-loader?exposes=$,jQuery!jquery";
//
// 将 `jquery` 添加到全局对象中，其名称为 `$` 和 `jQuery`import { concat } from "expose-loader?exposes=_.concat!lodash/concat";
//
// 将 `lodash/concat` 添加到全局对象中，其名称为 `_.concat`import {
map,
reduce,
} from "expose-loader?exposes=_.map|map,_.reduce|reduce!underscore";
//
// 将 `underscore` 中的 `map` 和 `reduce` 方法分别添加到全局对象中，其名称为 `_.map` 和 `_.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 模块。并且只会在 bundle 中使用时才会被暴露。
然后用你喜欢的方式运行 webpack。
配置项
| Name | Type | Default | Description |
|---|---|---|---|
exposes
|
{String|Object|Array<String|Object>}
|
undefined
|
List of exposes |
exposes
类型：String|Object|Array<String|Object> 默认值：undefined
List of exposes.
String
允许用一个 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 "underscore";webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
// 对于 `underscore`，它可以是 `_.map map` 或者 `_.map|map`
exposes: "jquery",
},
},
],
},
};Object
允许用一个对象来描述 expose。
globalName
类型：String|Array<String> 默认值：undefined
全局对象中的名字。（必填项）。
src/index.js
import _ from "underscore";webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("underscore"),
loader: "expose-loader",
options: {
exposes: {
// 可以是 `['_', 'filter']`
globalName: "_.filter",
moduleLocalName: "filter",
},
},
},
],
},
};moduleLocalName
类型：String 默认值：undefined
模块中的方法／变量／等的名称（该模块必须导出它）。 如果指定了 moduleLocalName，它只暴露 moduleLocalName 的值。
src/index.js
import _ from "underscore";webpack.config.js
module.exports = {
module: {
rules: [
{
test: require.resolve("underscore"),
loader: "expose-loader",
options: {
exposes: {
globalName: "_.filter",
moduleLocalName: "filter",
},
},
},
],
},
};override
类型：Boolean 默认值：false
默认情况下，loader 不会覆盖全局对象中的现有值，因为它是不安全的。 在 development 模式下，如果值已经出现在全局对象中则抛出一个错误。 但是你可以使用此选项配置 loader 以覆盖全局对象中的现有值。
为了强制覆盖已经存在在全局对象中的现有值，你可以设置 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: require.resolve("underscore"),
loader: "expose-loader",
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) 下使用。
贡献
如果你还没有阅读，请花一点时间阅读我们的贡献指南。
License