使用Webpack的resolve.root选项实现同构React

Question

我的React应用程序使用Webpack的resolve.root，相对于我的JS文件根目录进行引用。 也就是说，我的文件结构包含以下内容：

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会尝试require 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

- Leo Jiang

Answer 1

你可以使用https://github.com/halt-hammerzeit/universal-webpack。这将允许您保留相同的webpack配置（例如resolve.root和任何别名），并帮助您向服务器端渲染迈进一步。使用文档提供了一个很好的示例，说明如何启动和运行此工具。

- taylorc93

Answer 2

您可以尝试使用这个babel插件：babel-plugin-module-resolver，

然后按照以下方式更改您的.babelrc文件：

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

然后您可以在server.js中要求您的组件：import App from 'components/App.react';

- chenkehxx

---

那不行，因为它不能很好地扩展，感谢您的建议。 - Leo Jiang

为什么这个不能很好地扩展？ - taylorc93

算了，我以为必须将每个目录添加到 .babelrc 中，但实际上只需要添加顶级目录就可以了，这应该能行。 - Leo Jiang

Answer 3

你试过了吗？

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

- Trevor Joseph

Answer 4

你的 server.js 文件在哪里？如果它与你的“containers”文件夹在同一目录下，你可以使用./components/App.react。

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

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

- Eric Kambestad

---

我想在我的JavaScript文件中使用相对于根目录的requires。 - Leo Jiang

你的整个目录结构是什么样子的？ - Eric Kambestad

我更新了问题，包含了我的整个目录结构。 - Leo Jiang

应该这样做：从'../js/components/App.react'导入App。 - Eric Kambestad

Answer 5

根据您的目录结构...

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

是你想要的。

- Eric Kambestad

---

正如我在问题中所述，我希望所有路径都相对于我的JS文件根目录。 - Leo Jiang