javascript - IIFE 函数中的新类现在可以与 webpack 一起使用

标签 javascript webpack iife

所以我有这个功能。我试图从这个 js 文件外部获取一个新的 Test('selector', {}),它是未定义的,我似乎不明白为什么。

我真的需要将它附加到窗口对象吗? 有人可以解释一下吗?

值得一提的是,它可以在同一个文件中工作。

let Test = ((window, document, undefined) => {

  class test {
    constructor(selector, options) {
     this.selector = document.querySelector(selector);
     this.options = options;
    }
 }

 return test;

})(window, document);

这是我的 webpack 配置文件:

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 来加载它们。在上面的示例中,Test 函数从未加载并且未定义。 JavaScript 的默认作用域性质不再存在。

关于javascript - IIFE 函数中的新类现在可以与 webpack 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37379193/

相关文章:

javascript - 如何以编程方式设置 Angular 2 表单控件值?

javascript - 有什么方法可以防止水平滚动触发 OS X Lion Safari 上的向后滑动手势?

javascript - grunt-contrib-handlebars - 输出与我运行 handlebars npm 任务时不同

javascript - 在 webpack 中使用导入内联单个 javascript 文件

javascript - 将我的 gulpfile 包装在立即调用的函数表达式中

javascript - 使用 Bootstrap 模式的 Ajax 加载

javascript - 为什么 webpack 在需要输出时返回一个空对象?

javascript - WordPress 定制器和 webpack - 公开 wp 全局

javascript - 如何使用 IIFE 创建 Javascript 对象

javascript - 使用 IIFE 并传入参数,我应该什么时候这样做? JavaScript