javascript - 在 ES6 中导入用于服务端渲染的组件

Question

我有一个不错的小 ES6 React 组件文件(针对此说明进行了简化)。它使用特定于浏览器的库，store这一切都在浏览器上运行得很漂亮:

/app/components/HelloWorld.js:

import React, { Component } from 'react';
import store from 'store';

export default class HelloWorld extends Component {
  componentDidMount() {
    store.set('my-local-data', 'foo-bar-baz');
  }

  render() {
    return (
      <div className="hello-world">Hello World</div>
    );
  }
}

现在我正尝试使用 babel-register 让它在服务器上呈现如下所示:

/server/routes/hello-world.js:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import HelloWorld from '../../app/components/HelloWorld'

export default function(req, res) {
  res.render('root', {
    reactHTML: ReactDOMServer.renderToString(<HelloWorld />),
  });
}

由于导入“商店”，我从 Node 服务器收到一条错误消息，提示“窗口未定义”。理想情况下，我可以通过检测环境( Node 与浏览器)有条件地导入，但 ES6 不支持条件导入。

解决这个问题的最佳方法是什么？我实际上不需要执行浏览器代码(在这种情况下 componentDidMount 不会被 ReactDOMServer.renderToString 调用)只是让它从 Node 运行。

Answer 1

一种方法是使用 babel-rewire-plugin .您可以通过 plugins 选项将其添加到 babel-register

require('babel/register')({
  plugins: ['babel-rewire-plugin']
});

然后将您的 store 依赖项重新连接到模拟商店:

HelloWorld.__Rewire__('store', {
  set: () => {} // no-op
});

您现在可以从服务器和平地渲染 HelloWorld。