Первый проект на React

Проверить меня на обучаемость на новом месте работы.
1.03.2017

Я совершенно не понимал ничего в ReactJS, но мне достался внутренний проект на нём. Сервис уже несколько месяцев никем не поддерживался, менеджер рассказал мне бриф и отправил работать.

Моя первая конфигурация вебпака:

	
var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractCSS = new ExtractTextPlugin('[name]'); module.exports = { entry: { 'bundle.js': './src/components/App.js', 'bundle.css': './src/scss/████████.scss' }, output: { path: './public/', filename: "[name]" }, module: { loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader' }, { test: /\.scss$/i, loader: extractCSS.extract(['css','sass']) }, // images { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" }, { test: /\.jpg$/, loader: "file-loader" } ] }, plugins: [ extractCSS ] };

Моё первое письмо по проекту:

Привет, ██████.

Мне не ясны следующие моменты в проекте artlebedev/█████.
— Как собирается JSON в ./data/fonts.json? Я не нашёл его в webpack.config.js Может, его просто руками надо дописывать и минифицировать обратно?
— Весь деплой проиходит прямо на продакшн? В ██████████ есть пункт чек-листа про изменение title на «██████████» с «███████████». Мне кажется, что он должен решиться деплоем. Не хотелось бы сломать сайт одной командой.

Я сегодня первый день на работе и могу задавать странные вопросы, прошу прощения, вскоре я освоюсь и вопросы закончатся=)

Мне предстояло переписать серверную и клиентскую часть проекта.

Это был мой первый и единстенный проект на это время, было время изучить вообще всё. Постепенно, я переписал конфигурацию вебпака под свои требования. Переписал все компоненты проекта по заданию менеджера. Убрал старые и новые дыры в бекенде.

Я научился запускать сборку с вотчерами, так ускорилась разработка. Подключил минификацию файла — так ускорилась первая загрузка сайта.

Автотесты иногда сильно мешают и сковывают — не бойся их отметать до лучшего времени

Ещё через пару дней я добрался до ESLint. По началу мне очень нравилось: ого, столько ошибок можно исправить, всё само подсказывается. Затем, пришло осознание, что конфигурации, например, Airbnb не подходят для используемого код-стайла. Когда же я разобрался во всех настройках, то отключил линтер. Потому что комментариев отключающих линтер становится больше, чем самого кода. Вместо помощи и хорошей практики разростался мусор. На тот момент наши пути разошлись.

Затем, PostCSS. Я переписал большую часть стилевой базы в процессе работы руки Б-га, так что можно было использовать только PostCSS, без SCSS. Всякие удобные плагинчики, эксперименты — я такой весь пост-пост, я такой весь мета-мета.

	
module.exports = { devtool: NODE_ENV === 'dev' ? 'eval' : false, watchOptions: { aggregateTimeout : 100, }, entry: { 'bundle.js': './src/index.js' }, output: { path: path.resolve(__dirname, './'), filename: 'bundle.js' }, module: { rules, }, plugins, devServer: { contentBase : path.join(__dirname, './'), compress : true, port : 9000, historyApiFallback : true, proxy: { '/███████████': { target: 'http://█████████████████████:80/', pathRewrite: { '^/███████████' : '' }, changeOrigin: true }, '/███████████': { target: 'http://█████████████████████:80/', changeOrigin: true } } } }

Создан в Студии Артемия Лебедева в 2017 году.