javascript - Elixir webpack 后 chrome 控制台中未定义的 var

Question

我有一个js文件scripts.js，其中包含vue js代码:

var app2  = new Vue({
    el: '#app-2',
    data:{
        message: 'Some msg'
    }
})

然后我用 gulp elixir webpack 构建 js 文件

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
});

然后我加载 html 中的 public/js/app.js 文件，一切正常。但如果我尝试记录这个变量，我会得到一个未定义的错误。

console.log(app2); //undefined

如果我将scripts.js加载到html而不使用webpack，那就可以了。

那么在 webpack 构建后如何记录这个变量呢？谢谢

Answer 1

该变量可能已被缩小并沙箱化，并且在全局范围内不可用。如果您想在缩小后访问此变量，则必须以某种方式将其绑定(bind)到全局范围。

例如你可以这样做:

var app2  = new Vue({
    el: '#app-2',
    data:{
        message: 'Some msg'
    }
});
window["app2"] = app2;
//window.app2 = app2;  <- it should also work

这样 app2 将始终在浏览器的全局上下文中可用。