Question

我使用webpack配置中的插件部分设法正确使用webpack dev服务器和节点服务器（express）。

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

到目前为止，我遇到的唯一问题是没有webpack＆＃39;解析＆＃39;我的服务器端代码我遇到了需要组件但路径未解决的情况

即

在组件内部

'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

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

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

但是，由于这依赖于私有Node.js核心方法，所以这是也是一个可能停止在上一个或下一个版本上工作的黑客节点

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

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

Answer 2

我看到两个选项：

也使用webpack编译客户端代码。如果客户进入 point与服务器在同一个目录中 - 它应该适用于你的现在的代码。这看起来很自然。
使用相对路径，即 import Header from './components/header/main'

Webpack-dev-server和同构反应节点应用程序

2 个答案: