webpack-dev-server 和同构 react-node 应用

Question

我已经成功地使用 webpack 开发服务器和节点服务器 (express)，使用 webpack 配置中的插件部分。

一切正常，但现在我正在尝试同构并在 express 应用程序中使用客户端组件。

到目前为止我遇到的唯一问题是没有 webpack 'parsing' 我的服务器端代码我遇到了需要组件但路径没有解决的情况

I.E.

组件内部

'use strict';

import React from 'react';
import { RouteHandler, Link } from 'react-router';
import Header from 'components/header/main'; // <-- This line causes the error because webpack is not working when parsing this JSX server-side

export default React.createClass({
    displayName: 'App',
    render() {
        return ( // ... More code

我应该以另一种方式配置 webpack 还是必须将所有导入更改为在服务器端有效？

如果您想查看实际状态，请查看代码库 https://github.com/vshjxyz/es6-react-flux-node-quickstart

Answer 1

我看到 2 个选项：

同时使用 webpack 编译客户端代码。如果客户输入 point 与服务器位于同一目录中 - 它应该适用于您的目前的代码。这对我来说很自然。
使用相对路径即 import Header from './components/header/main'

Answer 2

为了能够以 require('components/Header.js'); 之类的方式要求组件并避免使用诸如 require('../../../../../../Header.js'); 之类的长相对路径，您可以在任何 require() 之前将此代码添加到您的节点应用程序来电：

process.env.NODE_PATH = __dirname;
require('module').Module._initPaths();

However, since this relies on a private Node.js core method, this is also a hack that might stop working on the previous or next version of node.

可以在 https://gist.github.com/branneman/8048520

找到此问题的其他可能解决方案

webpack-dev-server 和同构 react-node 应用

Webpack-dev-server and isomorphic react-node application

node.js

reactjs

webpack

isomorphic-javascript

webpack-dev-server