The expose loader adds modules to the global object. This is useful for debugging, or supporting libraries that depend on libraries in globals.
npm i expose-loader --save
注意: 模块必须在你的 bundle 中被 require()
过,否则他们将不会被暴露。
require("expose-loader?libraryName!./file.js");
// 通过属性名 "libraryName" 暴露 file.js 的 exports 到全局上下文。
// 在浏览器中,就将可以使用 window.libraryName 访问。
例如,假设你要将 jQuery 暴露至全局并称为 $
:
require("expose-loader?$!jquery");
然后,window.$
就可以在浏览器控制台中使用。
或者,你可以通过配置文件来设置:
webpack v1 用法
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$" }
]
}
webpack v2 用法
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
除了暴露为 window. $
之外,假设你还想把它暴露为 window.jQuery
。
对于多个暴露,你可以在 loader 字符串中使用 !
:
webpack v1 用法
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
]
}
webpack v2 用法
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}]
}
require.resolve
是一个 node.js 调用(与 webpack 处理流程中的 require.resolve
无关)。require.resolve
用来获取模块的绝对路径("/.../app/node_modules/react/react.js"
)。所以这里的暴露只会作用于 React 模块。并且只在 bundle 中使用到它时,才进行暴露。
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Sean Larkin |