Javascript IIFE函数中的新类正在使用webpack
所以我有这个函数。我试图从这个js文件外部获取一个新的测试('selector',{}),它没有定义,我似乎不知道为什么 我真的需要将其附加到窗口对象吗? 有人能解释一下吗 更重要的是,它是从同一个文件工作的Javascript IIFE函数中的新类正在使用webpack,javascript,webpack,iife,Javascript,Webpack,Iife,所以我有这个函数。我试图从这个js文件外部获取一个新的测试('selector',{}),它没有定义,我似乎不知道为什么 我真的需要将其附加到窗口对象吗? 有人能解释一下吗 更重要的是,它是从同一个文件工作的 let Test = ((window, document, undefined) => { class test { constructor(selector, options) { this.selector = document.querySelecto
let Test = ((window, document, undefined) => {
class test {
constructor(selector, options) {
this.selector = document.querySelector(selector);
this.options = options;
}
}
return test;
})(window, document);
这是我的网页包配置文件:
module.exports = {
entry: './src/test.js',
module: {
loaders: [
{
test: /\.js?$/,
exclude: / (node_modules) /,
loader: 'babel-loader',
query: {
presets: ['es2015', 'stage-0']
}
}
]
},
output: {
path: __dirname + '/src',
filename: 'test.min.js'
}
}
我显然误解了webpack在做什么。Webpack将所有JavaScript文件转换为全局命名空间中不可用的模块。这就是为什么我们需要使用require/import来加载它们。在上面的示例中,测试函数从未加载,也没有定义。JavaScript的默认作用域性质不再存在。IIFE仍然是函数,函数有自己的作用域,与全局作用域无关。当函数完成执行时,函数作用域中声明的变量将消失。如果希望它在IIFE之后继续存在,则需要在函数外部声明它或在函数外部附加类的值。将窗口传递给函数没有任何好处,请改用全局函数:
((窗口,文档,未定义)=>{…})(此,文档)
因为它们在浏览器中是同一个对象,并且必须引用全局对象,所以窗口可能无法重新分配。在arrow函数中,它必须引用全局对象。@AkshatMahajan:“它从同一个文件工作”是什么意思?您如何执行此脚本?你在运输它吗?您是否意外地将其视为一个模块?@Bergi它似乎在不传输的情况下工作。你能解释一下你不小心把它当作一个模块是什么意思吗?