2

使用 webpack 配置中的插件部分，我已经成功地将 webpack 开发服务器与节点服务器（express）一起正确使用。

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

到目前为止，我遇到的唯一问题是，如果没有 webpack“解析”我的服务器端代码，我会遇到需要组件但路径没有解决的情况

IE

在组件内部

'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

4

2 回答 2

3

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

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

但是，由于这依赖于私有 Node.js 核心方法，因此这也是一种可能会停止在上一个或下一个版本的 node 上工作的 hack。

此问题的其他可能解决方案可在https://gist.github.com/branneman/8048520找到

于 2015-06-04T10:10:27.043 回答
1

我看到 2 个选项：

  1. 也使用 webpack 编译客户端代码。如果客户端的入口点与服务器的入口点位于同一目录中 - 它应该与您当前的代码一起使用。这对我来说很自然。
  2. 使用相对路径，即 import Header from './components/header/main'
于 2015-06-02T16:29:37.707 回答