Каждый раз, когда я начинаю новый проект, у меня есть рутина. Я открываю предыдущий проект и копирую кучу точечных файлов, package.json
и webpack.config.js
, и продолжаю изменять их в соответствии с моими потребностями.
Мне не обязательно нужно что-то слишком навороченное. В большинстве случаев все, что мне нужно, - это транспилятор, линтер и какой-то способ импортировать мои стили. Иногда мне даже могут понадобиться изображения или шрифты. Так почему же мой package.json
такой массивный, если я работаю над этим проектом всего 5 минут?
Ваш личный вариант использования может не включать такие пакеты, как babel-plugin-transform-runtime
и babel-preset-stage-0
, или обширную конфигурацию ESLint Airbnb для выполнения вашей работы, но это все же далеко не преувеличение. Все может стать очень неухоженным, очень быстро. И это даже без добавления каких-либо зависимостей, специфичных для фреймворка - это всего лишь инструмент!
Есть причина, по которой разработчиков пугает конфигурация webpack, и дело не только в большом количестве задействованных зависимостей. Настройка webpack с нуля, хотя поначалу это может быть весело, может быстро превратиться в самостоятельную работу на полный рабочий день, пока вы не добьетесь того, чтобы все работало именно так, как нужно.
Более того, у многих из этих зависимостей есть армия из peerDependencies
, которые необходимо установить для правильной работы. Если мы посмотрим на npmdiscover.com, мы сможем легко определить, какие из этих зависимостей часто используются вместе друг с другом. Было бы здорово, если бы вам нужно было установить только один пакет?
Представьте себе мир, в котором существуют разумные упакованные значения по умолчанию, где все, что вам нужно сказать, это «Я хочу последний стандарт ECMAScript и возможность его линтинга», не беспокоясь о дюжине зависимостей в package.json
- и если вам нужно их расширить по умолчанию, вы могли бы. Представьте себе мир, в котором конфигурация вашего веб-пакета не должна быть длиннее, чем весь исходный код большинства пакетов.
Так я построил tronic.
Tronic - это не зависящий от фреймворка сборщик веб-пакетов, который имеет дело с подавляющим большинством распространенных сценариев использования. Он предоставляет разумные настройки по умолчанию в зависимости от того, как вы, скорее всего, будете использовать загрузчик, а затем не мешает вам.
npm install --save-dev tronic
Конфигурация в tronic должна быть как можно более ограниченной. Вы просто определяете, какие tronic plugins вы хотите использовать, и забываете об этом - все остальное позаботятся по умолчанию.
Установить плагин так же просто, как запустить следующую команду:
npm install --save-dev tronic-plugin-babel tronic-plugin-sass
А затем добавьте в свой tronic.config.js
файл следующее:
module.exports = { plugins: ['tronic-plugin-babel', 'tronic-plugin-sass'] }
Плагины tronic решают проблему беспорядка, связанного с необходимостью установки и настройки полдюжины пакетов с опциями, которые вы, как правило, гарантированно всегда хотите использовать. Каждый плагин объединяет в одном пакете функциональность одного домена и устанавливает предопределенные параметры в зависимости от того, что вам может понадобиться.
Тем не менее, всегда есть крайние случаи. Таким образом, значения по умолчанию вам не навязываются; вы можете расширять и настраивать его настолько, насколько это возможно, с помощью webpack. Ваша конфигурация будет объединена и всегда будет иметь приоритет над конфигурацией tronic, поэтому вы никогда не попадете в ситуацию, когда настройки по умолчанию вам мешают.
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = { plugins: ['tronic-plugin-babel', 'tronic-plugin-sass'], webpack: { output: { filename: 'bundle.min.js' }, plugins: [new BundleAnalyzerPlugin()] } }
Поскольку tronic использует webpack под капотом, у вас есть доступ ко всей коллекции существующих плагинов webpack. Взгляните на несколько тронических примеров, чтобы увидеть, как и где по-настоящему сияет троник.
В планах развития больше собственных и созданных сообществом плагинов, и я планирую держать tronic в актуальном состоянии и актуализировать по мере того, как будет выпущено больше функций для webpack и сопутствующих загрузчиков.
Надеюсь, tronic будет вам полезен! Пожалуйста, не стесняйтесь присылать любые вопросы или запросы функций на GitHub и подписывайтесь на меня в Twitter.