未定義的VAR在Chrome控制檯靈藥的WebPack後

Question

我有VUE的js代碼JS文件scripts.js中：

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

然後我建立與一飲而盡靈藥的WebPack JS文件

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

然後我加載html和public中的public/js/app.js文件運行良好。 但是，如果我嘗試記錄這個變種，我得到一個未定義的錯誤。

console.log(app2); //undefined 

如果我將加載scripts.js到沒有webpack的html，它會沒事的。

那麼如何在webpack構建之後記錄這個變量？ 謝謝

Answer 1

可能這個變量被縮小和沙箱化，並且在全局範圍內不可用。如果你想在縮小後訪問這個變量，你必須以某種方式將它綁定到全局範圍。

例如，你可以這樣做：

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

這樣app2將在瀏覽器的全球範圍內始終可用。