Как стать автором
Обновить

Комментарии 33

Недостаток конфигурации легко обойти, react-app-rewired прекрасен.

да, отличная штука, я как общался с Тимом, когда он занимался её разработкой. Но это все таки отдельный инструмент.

Есть еще — custom-react-scripts — это кастомная версия react-scripts.

create-react-app my-app --scripts-version custom-react-scripts


Здесь подробнее про custom-react-scirpts — Configure create-react-app without ejecting
Здесь можно почитать офф. инфу Document maintaining a fork of react-scripts as an alternative to ejecting #682

Не-не-не: custom-react-scripts — это форк, а react-app-rewired — врапер. Почувствуйте разницу.

да, форк react-scripts (не create-react-app), и этот подход официально поддерживается, я кидал ссылку на тред.
И это как только будут новые фичи в react-scripts — они так же будут и тут.
А чем вам css-модули не угодили?
ничем. CSS modules отличный инструмент, но в паре с CRA не работает
посмотреть что?
как прикрутить Styled-JSX и настроить абсолютные пути для импорта

так там нету ничего про CRA кроме ссылки на RAW

Абсолютные пути в импорте

Работают относительно папки src, пример:


import MyComponent from 'components/MyComponent'

Конфигурация babel-plugin-module-resolver
['module-resolver', { 'root': ['src'] }]

Настройка WebStorm

Для папки src в контекстом меню выполнить: Mark Directory as > Resource Root.


Настройка Atom
  • Установить плагин js-hyperclick.
  • Для доменных компонентов прописывать в package.json путь до src:
    "moduleRoots": ["../.."]

Собственно, я больше хотел обратить внимание на Styled-JSX.

Интересно почитать про велосипедостроение на тему SSR для CRA. :)

Поддерживаю :) Ну, на самом деле велосипедов там нет, поскольку поддержка нулевая.

Не видишь суслика? А он там есть.

пока не поддерживается, но уже давно есть PR Export render function #1292 и теоретически он попадет в релиз 0.10.0
cra побоку как ты делаешь ssr в случае с redux. Все банально при любом раскладе — определить экшены, выполнить, отрендерить, влить стор в html и распарсить на фронте

Покажите код :)

Да вообще как здрасьте. Как вывести космический корабль на орбиту? Да все банально при любом раскладе — определить траекторию, спроектировать корабль (незначительная мелочь), построить его, запустить двигатели и произвести взлет.

Конечно, Redux — не «rocket science», но за этим вот «выполнить экшены» — куча тех еще компромиссов и ухищрений.

Ну разве что немного подумать, как посадить первую ступень на плавучую платформу :)

"start": "cross-env NODE_PATH=src/scripts react-scripts start"

И как такие костылищи прикажете поддерживать IDE?
Красивым кодом они это еще называют.

Развешивание ярлыков. У меня есть ответы для Atom и WebStorm, например.

В конце концов всё свелось к такому:


Это так классно! Из коробки можно делать почти всё! Но если вы хотите чего-то большего, то делайте eject, но если сделаете, то перестаёте обновляться, так что лучше не eject'ить. Но если всё же хотите что-то новенькое, то можете костыльнуть так и вот так и у вас будет почти то же самое, что и с CRA, но это будет работать немного не так.

Лично для меня не является аргументом


Лишние конфиги и лишний код

отсутствуют webpack.config, нет кучи *rc-файлов и зависимостей в package.json.

Не знаю как Вы, а я вот для себя сделал свой собственный шаблончик, расковыряв, помоему, ёменовский. Там у меня и все красивости и все нужные мне фичи есть. А если нужна ещё какая-то, то я просто в конфигах эту фичу поправляю. Не люблю я, когда моими конфигами заведует кто-то другой. Мне нравится когда я сам знаю как всё работает и сам настроил так, чтобы в этом моменте не было лишней информации, а в этом была нужная.

React-create-app безусловно крутая штука что бы быстро стартануть новый проект.

Вот еще одна, но с одним приятным отличием — сразу получаете sandbox и возможность документирования компонентов в маркдауне https://github.com/OpusCapitaBES/js-react-showroom-client

image

А как этим пользоваться — держать отдельным приложением куда выносятся все компоненты из других проектов, или прикручивать к каждому проекту?

Сейчас удобнее к каждому. Отдельным приложением тоже можно, но это требует особого оформления пакетов — что бы файлы доки попадали в npm пакет + компоненты по своим именам торчали из main файла (бандла) пакета. Ведутся работы над оптимизацией этого варианта.

Не понимаю, почему многие кто делают какие-то boilerplate с webpack делают webpack.dev.config и webpack.prod.config, хотя реально 80% файла одинаковые, более того, нужно думать о том, что ты поддерживаешь 2 файла, вместо 1, а если это еще деплоить в Docker и на разные environment (local, test-*, stage, prod) это получается 2 файла костылей.

п.с. в своих проектах это всегда 1 файл.
Чтобы не городить ветки ифов, очевидно. У нас 5 конфигов — общий, вайтлейблинг и расширяющие их: дев, прод и сторибук. Различия везде есть, и вместо ветвей условий мы используем композицию маленьких кусочков.
А можно подробней, что выносится в отдельные dev/prod конфиги? Я использую общий конфиг на все энвайрменты, возможно ваши примеры позволят мне переосмыслить подход.
В основном для prod это всякие DefinePlugin'ы, минифаеры, оптимизаторы, экстракторы. Для dev — HMR, другие дефайны, настройки проксей и т.п.
Использую модуль webpack-config
Позволяет вынести общую часть в базовый конфиг, а в конкретных конфигах его расширять
У меня это расширение большей частью сводится к редактированию DefinePlugin

Кроме того можно настройки редко используемых(либо опциональных) плагинов вынести в отдельные файлы, и подключать/отключать одной строчкой
Например unused-files-webpack-plugin, webpack-bundle-analyzer для локальной работы/анализа
Настроенный UglifyJsPlugin только для серверных сборок

Как итог, в файле под каждое окружение находится его более конкретное описание, отличающее его от других конфигов, и при этом без if-ов в неожиданных местах
Зарегистрируйтесь на Хабре , чтобы оставить комментарий