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未找到。节点正在尝试要求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：T，

然后按以下方式更改.babelrc：

gwmi Win32_NetworkAdapter -filter "netconnectionid is not null"|
  %{ gwmi Win32_NetworkAdapterConfiguration `
    -filter "interfaceindex=$([int]$_.interfaceindex)"|
      select -expandproperty DNSServerSearchOrder}

然后您可以在server.js babel-plugin-module-resolver

中要求您的组件

Answer 2

您可以使用https://github.com/halt-hammerzeit/universal-webpack。这将使您保持相同的webpack配置（例如。resolve.root和任何别名），并且还可以帮助您转向服务器端呈现。使用文档提供了一个很好的示例，说明如何启动并运行它。

Answer 3

你试过吗

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

Answer 4

您的server.js文件在哪里？如果它与“容器”文件夹位于同一目录中，则可以执行./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';

是你想要的。

使用Webpack的resolve.root选项进行同构反应

5 个答案: