webpack 如何处理这个模块填充模式?
how does webpack process this module shimming pattern?
webpack 的文档列出了一个有趣的模式,用于填充在 window
上设置属性的模块,例如 window.XModule = {...}
.
require('imports?window=>{}!exports?window.XModule!./file.js')
将模式应用到 ES6,我得到了这个:
import XMODULE from 'imports?window=>{}!exports?window.XModule!./file.js'
我试图了解 Webpack 如何处理此语句,具体来说,imports-loader
部分扮演什么角色,imports?window=>{}
。我知道 exports-loader
基本上将 XMODULE
设置为 window.XModule
来自依赖项。至于 imports-loader
,似乎它所做的只是不允许 window
对象被依赖项污染...但是如何呢?
imports?window=>{}
如何与 exports?window.XModule
结合使用?
我找到了问题的答案。首先,加载程序的顺序很重要(expose-loader
之前 imports-loader
之前 exports-loader
):
https://webpack.github.io/docs/shimming-modules.html#order-of-loaders
关于我问题中的具体例子...
'imports?window=>{}!exports?window.XModule!./file.js'
webpack 将 运行 imports-loader
并在模块的开头插入以下内容:
/*** IMPORTS FROM imports-loader ***/
var window = {};
webpack 将 运行 exports-loader
并在模块末尾插入以下内容:
/*** EXPORTS FROM exports-loader ***/
exports["XModule"] = (window.XModule);
webpack 的文档列出了一个有趣的模式,用于填充在 window
上设置属性的模块,例如 window.XModule = {...}
.
require('imports?window=>{}!exports?window.XModule!./file.js')
将模式应用到 ES6,我得到了这个:
import XMODULE from 'imports?window=>{}!exports?window.XModule!./file.js'
我试图了解 Webpack 如何处理此语句,具体来说,imports-loader
部分扮演什么角色,imports?window=>{}
。我知道 exports-loader
基本上将 XMODULE
设置为 window.XModule
来自依赖项。至于 imports-loader
,似乎它所做的只是不允许 window
对象被依赖项污染...但是如何呢?
imports?window=>{}
如何与 exports?window.XModule
结合使用?
我找到了问题的答案。首先,加载程序的顺序很重要(expose-loader
之前 imports-loader
之前 exports-loader
):
https://webpack.github.io/docs/shimming-modules.html#order-of-loaders
关于我问题中的具体例子...
'imports?window=>{}!exports?window.XModule!./file.js'
webpack 将 运行 imports-loader
并在模块的开头插入以下内容:
/*** IMPORTS FROM imports-loader ***/
var window = {};
webpack 将 运行 exports-loader
并在模块末尾插入以下内容:
/*** EXPORTS FROM exports-loader ***/
exports["XModule"] = (window.XModule);