Изоморфный React с опцией Resolve.root Webpack

Мое приложение React использует требования относительно корня моего JS-файла, используя resolve.root Webpack. т.е. моя файловая структура содержит следующее:

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

В AppContainer.react.js у меня есть:

import App from 'components/App.react';

Это работает на стороне клиента. Теперь я пытаюсь сделать его изоморфным. Если мне требуется AppContainer.react.js в моем server.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

reactjs node.js javascript isomorphic-javascript
person Leo Jiang    schedule 09.10.2016    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Вы можете использовать https://github.com/halt-hammerzeit/universal-webpack . Это позволит вам сохранить ту же конфигурацию веб-пакета (например, resolve.root и любые псевдонимы) и дополнительно поможет вам перейти к рендерингу на стороне сервера. Документация по использованию дает довольно хороший пример того, как это настроить и запустить.

person taylorc93    schedule 20.12.2016

arrow_upward
1
arrow_downward

вы можете попробовать использовать этот babel-плагин: babel-plugin-module-resolver,

затем измените свой .babelrc следующим образом:

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

тогда вы можете потребовать свой компонент в своем server.js import App from 'components/App.react';

person chenkehxx    schedule 14.12.2016
comment
Это не сработает, потому что плохо масштабируется, спасибо за предложение. - person Leo Jiang; 14.12.2016
comment
Почему это плохо масштабируется? - person taylorc93; 21.12.2016
comment
Неважно, по какой-то причине я думал, что мне нужно добавить каждый каталог в .babelrc. Поскольку это только каталоги верхнего уровня, это, вероятно, должно работать. - person Leo Jiang; 21.12.2016

arrow_upward
-1
arrow_downward

Ты пытался

import App from '../components/App.react';
person Trevor Joseph    schedule 03.11.2016

arrow_upward
-1
arrow_downward

Где ваш файл server.js? Если он находится в том же каталоге, что и папка «контейнеры», вы можете сделать ./components/App.react.

В противном случае вы можете использовать .., чтобы вернуться так далеко, как вам нужно, чтобы найти ваши файлы.

Examples (relative to server.js):
./ -> current directory
../ -> up one directory
../../ -> up two directories
etc..
person Eric Kambestad    schedule 03.11.2016
comment
Я хочу использовать требования относительно корня моих файлов Javascript. - person Leo Jiang; 06.11.2016
comment
Как выглядит вся ваша структура каталогов? - person Eric Kambestad; 07.11.2016
comment
Я обновил вопрос, включив в него всю структуру каталогов. - person Leo Jiang; 08.11.2016
comment
импортировать приложение из «../js/components/App.react»; должен сделать это - person Eric Kambestad; 08.11.2016

arrow_upward
-1
arrow_downward

На основе вашей структуры каталогов..

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

это то, что вы хотите.

person Eric Kambestad    schedule 07.11.2016
comment
Как я уже говорил в вопросе, мне нужны все пути относительно корня моих файлов JS. - person Leo Jiang; 08.11.2016