Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Нужно создать 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.

6 лет назад
andersol
Андрей 
37 летРоссия
12 лет в сервисе
Был
5 лет назад