webpack chuncks中未定义的全局窗口变量

Question

我正在使用webpack commmon chuncks来定义一个全局库对象（通用组件），它将与其他生成的bundle一起使用。

公共代码（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

您可以使用expose-loader解决问题。另请参阅此类issue。

虽然我认为你可以通过在回调中要求MyLib对象来轻松解决问题。无需再将其暴露在全球范围内。

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

旁注：您可以尝试使用CommonsChunkPlugin来简化代码拆分，然后使用简单的require('components')，插件正在完成剩下的工作。