服务器端使用 webpack 2 System.import 做出反应答案

【问题标题】：Server-side react with webpack 2 System.import服务器端使用 webpack 2 System.import 做出反应
【发布时间】：2016-09-04 10:09:22
【问题描述】：

我有一个使用 webpack 2 编译资产的同构应用程序。我现在使用 System.import 添加了分块，它在 webpack 端有效，但在未找到函数的服务器端无效。

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

【问题讨论】：

你在使用 CSS 模块吗？将 CSS 导入组件时会发生这种情况吗？
是的，当您在服务器上使用依赖于 webpack 的功能时，事情可能会失败。我创建了一个通用的反应样板，它也使用 webpack 来捆绑服务器代码。这样您就可以在服务器和客户端代码之间共享更多内容。 Check it here. 可能对你有用。我试着评论 webpack 的东西很多。

标签： reactjs webpack isomorphic-javascript

【解决方案1】：

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

特征检测 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 v2 和 react 我创建了一个库来帮助解决这个问题。 code-split-component

【解决方案2】：

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

使用带有target 'node' 的Webpack 编译您的代码并运行捆绑服务器端。
如果您已经使用 babel-register 或类似方法使用 babel 进行编译，您可以尝试类似 babel-plugin-remove-webpack 的方法（可能需要 PR 才能使其与 System.import 以及 require.ensure 一起使用）。
为 System.import 定义一个全局模拟，它只返回一个使用 require() 模块的已解决承诺。

【讨论】：