我有一个使用 webpack 2 来编译资源的同构应用程序。我现在使用 System.import 添加了分块，它在 webpack 端起作用，但在服务器端不起作用，因为找不到函数。

知道如何解决这个问题吗？

请您参考如下方法:

有几个选项可用于让 System.import 使用同构/服务器端渲染:

功能检测系统和polyfill

Node 允许您在多个地方调用 require() ，并且按如下方式填充 System.import 应该可以工作:

if (typeof System === "undefined") { 
  var System = { 
    import: function(path) { 
      return Promise.resolve(require(path)); 
    } 
  }; 
} 

如果您正在寻找更强大的实现，还有 es6-micro-loader ，它实现了一个可以在浏览器和节点中工作的 System polyfill。

使用babel-plugin-system-import-transformer将 System.import 替换为等效的 UMD 模式

即采用以下形式:

System.import('./utils/serializer').then(function(module){ 
    console.log(module); 
}); 

并将其转换为:

new Promise(function (resolve, reject) { 
    var global = window; 
 
    if (typeof global.define === 'function' && global.define.amd) { 
        global.require(['utilsSerializer'], resolve, reject); 
    } else if (typeof module !== 'undefined' && (module.exports && typeof require !== 'undefined') || 
               typeof module !== 'undefined' && (module.component && (global.require && global.require.loader === 'component'))) { 
        resolve(require('./utils/serializer')); 
    } else { 
        resolve(global['utilsSerializer']); 
    } 
}).then(function(module){ 
    console.log(module); 
}); 

或

<强> Build with Webpack targeting Node (将使用 require 加载 block ):

webpack --target node