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') ，其余工作就由插件完成。