Isomorphic React與Webpack的resolve.root選項

Question

我的應用程序做出反應需要使用相對於我的JS文件使用的WebPack的根resolve.root 。 即我的文件結構包含以下內容：

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相對於給定目錄？

編輯：我的目錄結構如下所示：

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

Answer 1

你可以嘗試使用這個babel-plugin： babel-plugin-module-resolver ，

然后更改你的.babelrc如下：

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

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

Answer 2

您可以使用https://github.com/halt-hammerzeit/universal-webpack 。 這將讓你保持相同的WebPack的配置（如resolve.root任何別名），另外幫助你向服務器端呈現動人。 使用文檔提供了一個很好的示例，說明如何啟動和運行它。

Answer 3

你有沒有嘗試過

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

Answer 4

你的server.js文件在哪里？ 如果它與'containers'文件夾位於同一目錄中，則可以執行./components/App.react 。

否則，您可以使用..來盡可能地找回您的文件。

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

Answer 5

根據您的目錄結構..

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

是你想要的。