Каждый раз, когда я начинаю новый проект, у меня есть рутина. Я открываю предыдущий проект и копирую кучу точечных файлов, 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.