Первый проект на React в 2017 году

Создан в Студии Артемия Лебедева в 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
					}
				}
			}
		}