Webpack塊中未定義的全局窗口變量

Question

我正在使用webpack通用塊定義一個全局庫對象（通用組件），該對象將與其他生成的包一起使用。

通用代碼（ components.js ）

MyLib = window.MayLib = {}
MyLib.Utils = {
  commonFn : function (){
    /* common code */
  }
}

module.exports = MayLib;

第一次常用用法（ dashboard.js ）

   require.ensure ('./components', function () {
      MyLib.Dashboard = {
        /** Dashboad code here */
      }
   })

第二種常用用法（ account.js ）

   require.ensure ('./components', function (){
     MyLib.Account = {
       /** Account code here */
     }
   })

生成捆綁包后，已創建新的通用代碼，但MyLib is undefined in global window, "cannot set property of undefined"

Answer 1

您可以使用Exposure-loader解決問題。 另請參見此類似問題 。

雖然我認為您可以通過在回調內要求MyLib對象來輕松解決問題。 無需將其暴露於全球范圍。

require.ensure ('./components', function (require){
  var MyLib = require('./components');
  MyLib.Account = {
    /** Account code here */
  }
})

旁注：您可以嘗試使用CommonsChunkPlugin來簡化代碼拆分，然后只需使用簡單的require('components') ，其余工作就由插件完成。