Создание среды разработки для frontend и backend JavaScript developers
Нужно создать 2 раздельных среды разработки для frontend и backend JavaScript девелоперов, работающих по одинаковому принципу:
Общее:
- Doсker контейнер с node js 9, yarn, webpack 3
- При каждом запуске контейнера, автоматически устанавливаются пакеты и зависимости через yarn (если новых пакетов нет - идем дальше)
- После каждого изменения js файла в папке /src:
- - eslint проверяет код, если есть ошибки, скрипт останавливается и в консоле отображаются ошибки. Если все ок, идем дальше.
- - обязательно поддержка es6 синтаксиса и tree shaking как для frontend так и для backend.
- - webpack подхватывает изменения, траспайлит, компилирует, билдит, конкатенирует и записывает в /dist/app.min.js
- - создаются sourcemap app.min.js.map и ссылка на этот файл прописывается в app.min.js
Frontend:
- порт приложения 3100
- порт browsersync 3200
- react js SSR. То есть рендер на стороне сервера с последующим подключением react на клиенте.
- структура react компонентов:
- - src/components
- - - Component-hello
- - - - Component-hello.js
- - - - Component-hello.scss
- - - - Component-hello.spec.js
- используем BEM, но только для обозначения классов.
- при изменении файла /dist/app.min.js или /dist/app.min.сss перезапуск страницы через browsersync.
- из scss каждого модуля генерируем один css файл /dist/app.min.сss и /dist/app.min.сss.map
- - Подключение scss происходит через import в js файле reactjs, вида import './Component-hello.scss';
- - Используем postcss для обработки стилей
- - Используем autoprefixer для postcss, browsers: ['>10%',]
- - если файл меньше 1кб файлы, конвертируем в base64 - url-loader
- - спрайты - webpack-spritesmith или аналоги
- - retina images автоматически генерируются, имя@2x - любой подходящий плагин для webpack 3 или postcss
Backend:
- порт 3500
- node js скрипты обязательно должны иметь поддержку как require, так и import, то есть es6. Для транспайлинга используем babel и webpack3.
- при изменении /dist/app.min.js перезапуск приложения (можно всего контейнера) через webpack hot reload. Можно использовать nodemon
Готовые решения, вида react-starter-kit или других boilerplate не подходят. Собираем все с 0, и только то, что указано в ТЗ.
Просьба сразу указывать сроки и бюджет.
В случае успешного сотрудничества мы предложим другие задачи, либо полноценную работу на part/full time.