Оригинал здесь.

Написав несколько приложений на React, теперь уже довольно скучно каждый раз начинать всё сначала. Мне нужно настроить webpack, webpack-dev-server, Babel с некоторыми пресетами и плагинами, Karma, React, несколько лоадеров для JSON, CSS, картинок и шрифтов – и объединить всё это вместе.


Альтернативой мог бы стать boilerplate, но многие из них содержат в себе кучу всего ненужного (роутер, Redux или сервер сайд рендеринг) и не покрывают некоторые нужные мне вещи (CSS-лоадеры, unit тестирование и т.д.). Не говоря уже о том, что разные проекты требуют различной конфигурации.

Сегодня всё действительно быстро меняется и boilerplate устаревает достаточно быстро. После того, как вы создали приложение с использованием boilerplate, на вас ложится ответственность содержать все зависимости в актуальном состоянии. Я обновлял зависимости для нескольких проектов и это требует довольно много туповатой, повторяющейся работы.

Теперь я предпочитаю использовать nwb.

Шаг 1. Устанавливаем nwb.

$ npm install -g nwb

Шаг 2. Используем команду nwb для создания нового приложения на React.

$ nwb new react-app scoreboard

Шаг 3. Заглядываем внутрь.

$ cd scoreboard

$ ls
README.md     nwb.config.js   public   tests
node_modules  package.json    src

Здесь нет ни webpack.config.js, ни .babelrc или karma.conf.js. Все настройки в nwb.config.js. Так что давайте посмотрим.

$ cat nwb.config.js

module.exports = { type: 'react-app' }

Конфигурация минимальна! Нам только нужно указать, что мы разрабатываем React-приложение и разумные настройки по умолчанию будут созданы.

package.json

$ cat package.json

{
  "name": "scoreboard",
  "version": "1.0.0",
  "description": "Describe scoreboard here",
  "private": true,
  "scripts": {
    "build": "nwb build",
    "clean": "nwb clean",
    "start": "nwb serve",
    "test": "nwb test"
  },
  "dependencies": {
    "react": "0.14.x",
    "react-dom": "0.14.x"
  },
  "devDependencies": {
    "nwb": "0.7.x"
  },
  "author": "",
  "license": "MIT",
  "repository": ""
}

Всё, что у нас в dependencies – это react и react-dom.
В devDependencies только nwb. Ни webpack, ни Karma или Babel – всё это менеджится nwb. Сам по себе nwb содержит много тестов, чтобы быть уверенным, что все эти вещи вместе работают согласованно.

Шаг 4. Запускаем сервер.

$ npm start -- --auto-install

[...]
nwb: serve-react-app
nwb: dev server listening at http://localhost:3001
webpack built a98e92c8c4d34bae8856 in 2791ms

Это запустит webpack-dev-server.
Попробуйте поменять файлы. Вы увидите, что webpack и Babel уже настроены для hot-reload React-компонентов.
Попробуйте заимпортить какой-нибудь npm-модуль, например:

import Rx from ‘rx’

Благодаря флагу --auto-install при сохранении файла установятся отсутствующие зависимости и добавятся в package.json.
Создайте и заимпортите CSS-файл. Webpack уже сконфигурирован и содержит правильный loader и autoprefixer.
Настройка всего этого вручную заняла бы много времени.

Шаг 5. Запускаем тесты.

$ npm test -- --server --coverage

[...]
SUMMARY:
√ 1 test completed

Это запустит Karma, интергрированную с webpack и измерением покрытия тестов.
С флагом --server тесты перезапускаются, когда вы сохраняете файл.
С флагом --coverage будет создан репорт. Вы можете установить плагин для редактора, чтобы видеть, какие строки покрыты тестами, а какие – нет.



Наконец, запускаем

$ npm run build

Данная команда сгенерирует статические ассеты. JavaScript и CSS из node_modules пойдут в vendor.js и vendor.css, тогда как код приложения – в app.js и app.css. Source maps создадутся в отдельном файле .map. Можете потом загрузить их на ваш вэб-сервер.

Я использовал nwb в нескольких проектах.
wonderstudio с более ранней версией nwb.
В то время как конфигурация в nwb несколько ограничена, хотя это работает на 90% из коробки, мне нужно сделать хотфикс, чтобы конфигурировать webpack так, как мне хочется.
Автор nwb выразил свои намерения в обеспечении большей гибкости в конфигурации.

Несколько последних написанных мной библиотек также используют nwb (например redux-send и ave). Он может генерировать UMD, CommonJS и ES6 версии модулей.

Как видите, nwb можно использовать также для разработки, тестирования и билдов вэб-приложений и библиотек на чистом JS или React-компонентов.

На момент написания nwb использует Babel 5, но мне предстоит ещё поискать инструмент, который настолько же хорошо выглядит и протестирован, как nwb. Встроенная поддержка unit-тестирования делает его для меня предпочительней других :D