Question

我有一个使用webpack 2编译资产的同构应用程序。我现在使用System.import添加了分块，它在webpack端工作，但在服务器端没有找到功能。

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

Answer 1

有一些选项可用于System.import使用同构/服务器端渲染：

功能检测System和polyfill

节点允许您在多个地方拨打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来加载块）：

webpack --target node

Answer 2

其中一个选项可能符合您的需求：

使用Webpack w / target 'node'编译代码并运行捆绑服务器端。
如果你已经使用babel-register或类似的东西编译babel，你可以尝试babel-plugin-remove-webpack之类的东西（除了System.import之外，可能还需要一个公关才能让它与require.ensure一起使用}）。
为System.import定义一个全局模拟，它只返回一个使用require（）'d模块解析的promise。

服务器端与webpack 2 System.import做出反应

2 个答案: