与 Webpack 的 resolve.root 选项同构 React

Question

我的 React 应用使用 requires 相对于我使用 Webpack 的 JS 文件的根 resolve.root。 IE。我的文件结构包含以下内容：

components
  App.react.js
containers
  AppContainer.react.js

在AppContainer.react.js中，我有：

import App from 'components/App.react';

这在客户端有效。现在我试图让它同构。如果我在我的 server.js 中需要 AppContainer.react.js，它会说找不到 components/App.react。 Node 正在尝试要求 containers/components/App.react.js，它不存在。我怎样才能让 Node require 相对于给定的目录？

编辑：我的目录结构如下所示：

css/
html/
js/
  components/
    App.react.js
  containers/
    AppContainer.react.js
  main.js <- requires AppContainer
public/
server/
  server.js <- requires AppContainer

Answer 1

你试过了吗

import App from '../components/App.react';

Answer 2

您的 server.js 文件在哪里？如果它与您的 'containers' 文件夹位于同一目录中，您可以 ./components/App.react。

否则，您可以使用 .. 返回到您需要找到文件的位置。

Examples (relative to server.js):
./ -> current directory
../ -> up one directory
../../ -> up two directories
etc..

Answer 3

根据您的目录结构..

import App from '../js/containers/AppContainer.react';

就是你想要的。

Answer 4

你可以尝试使用这个 babel-plugin: babel-plugin-module-resolver,

然后按如下方式更改您的 .babelrc：

{
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "components": "./components"
      }
    }]
  ]
}

然后您可以在 server.js import App from 'components/App.react';

中要求您的组件

Answer 5

您可以使用 https://github.com/halt-hammerzeit/universal-webpack。这将让您保持相同的 webpack 配置（例如 resolve.root 和任何别名），另外帮助您转向服务器端渲染。使用文档给出了一个很好的例子，说明如何启动它和运行.

与 Webpack 的 resolve.root 选项同构 React

Isomorphic React with Webpack's resolve.root option

javascript

node.js

reactjs

isomorphic-javascript