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

Question

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

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

Answer 1

以下选项之一可能适合您的需要：

使用带有 target 'node' 和运行捆绑服务器端的 Webpack 编译您的代码。
如果你已经在使用 babel-register 或类似的工具编译 babel，你可以尝试像 babel-plugin-remove-webpack 这样的东西（除了 require.ensure).
为 System.import 定义一个全局模拟，它只是 returns 使用 require() 模块的已解决承诺。

Answer 2

有几个选项可用于 System.import 使用 isomorphic/server-side 渲染：

特征检测System和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 加载块）：

webpack --target node

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

Server-side react with webpack 2 System.import

reactjs

webpack

isomorphic-javascript