Рубрики
Без рубрики

Подружиться с Webpack

Мой опыт учатся использовать Bundler WebPack в приложении React Front-End.

Автор оригинала: Lawrence Siden.

Недавно я начал переписать веб-приложение, которое я сделал раньше, но на этот раз с Rectjs Отказ Если вы хотите доставить страницу, которая использует библиотеки в React и связанные с ними, вы скоро отправятся с длинным списком сценариев SRC = «…» «Теги в заголовке или теле вашей страницы, если вы не используете Bundler.

Я находился под впечатлением, что WebPack стал Bundler выбора для реактивных проектов. Чтобы проверить это утверждение, я пошел на Github и искал «Имя файла revt.js filename: WebPack. *. JS». Это вернуло 1 570 673 матча.

Затем я искал «имя файла rest.js». Это вернуло 4,468 844 матча. Это около 35%.

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

Что еще немного оставляет более 3 миллионов проектов ReactJS на GitHub, которые не используют WebPack. Чтобы узнать, что они могут использовать блоклер вместо этого, если таковые имеются, я искал «имя файла: rest.js не имени файла: webpack.conf.js», но поисковая система GitHub не позволяет логичным операторам без простых условий поиска, как ” реагировать “

Я подозреваю, что большой кусок тех, которые не используют ни одного Bundler. Они просто вызывают Babel, чтобы создать дерево каталогов под Dist/Directory, а затем использовать другой инструмент, например Gulp-inject , чтобы найти все файлы .js и .css под данным каталогом, а затем вставьте их где-то в заголовок страниц или тело между тегами специального комментария.

Вот как мне управлять включением сценария, когда я работаю с Angularjs (1.x). В зависимости от сложности проекта и количества зависимостей он может производить десятки сценариев SRC = «» теги в файл index.html.

Вы должны быть осторожны, чтобы убедиться, что скрипты, которые содержат определения, загружаются перед сценариями, которые ссылаются на эти определения, либо ваше приложение не будет работать.

Он также принимает пропускную способность и ресурсы для загрузки и обработки всех этих файлов, хотя может помочь набору браузера, возможно, с Etags. Клиент все еще должен сделать запрос на голову для каждого включенного скрипта.

Есть Другие решения , но изучение их выходит за рамки этого поста. Эта дискуссия по Reactjs.org попыталась изучить его, но не уходило в значительной детализации, и все же уже немного датируется.

На данный момент я собираюсь предположить, что если вы работаете над проектом REVENTJS, WebPack – это Bundler выбора. В конце концов, может быть неверно более 1,5 миллиона разработчиков?

WebPack будет связывать все сценарии в проекте в один монолитный файл, как правило, названный «Bundle.js», что клиентская страница может загружаться с одним запросом. Но это многое больше, чем это.

Вместо того, чтобы набрать каждый файл, совпадающий «* .js» в каталоге, вы даете ему начальный файл, и он на самом деле анализирует их ищет вызовов «требовать (…)». Только те активы, которые на самом деле требуются где-то в коде, будут включены в комплект. Я еще не рассмотрел, как или может ли он справиться с чем-то вроде:

function myfunc(path) {
  var lib = require(path)
}

Однако есть хорошо населенная и путешествовала экосистема погрузчиков и плагинов, которые могут добавлять все виды функциональности. Согласно этому отличному пост По @rajaraodv ,

Принимая во внимание, что плагины работают на уровне пакета или кусков и обычно работают в конце процесса генерации расслоения. И некоторые плагины, такие как CommonschunkPlugins Идите еще дальше и измените, как сами созданы пакеты.

Затем существуют резольветеры, которые имеют дело с фактическими удалением пути или УРИ или URI для ресурсов.

С помощью правых плагинов и конфигурации WebPack принимает все возможное, в том числе изображения и файлы CSS, и преобразует их в код JavaScript, который может потребоваться запущенным приложением.

CSS-Loader – это специализированный погрузчик, который имеет побочный эффект тегов в инъекционном стиле в DOM, когда CSS был загружен. Вместо строгих CSS требуется («Путь/к/CSS») Возвращает объект, который можно назначить в качестве свойства встроенного стиля для компонента реагирования для присвоения классов, которые соответствуют селекторам CSS.

Встроенные стили имеют несколько недостатков. Они не поддерживают CSS Media Queries Отказ Поэтому в моем коде я решил игнорировать значение, возвращаемое по требуемую (путь/к/CSS), и использовать его только для его побочного эффекта – впрыскивая тег стиля прямо в DOM во время выполнения с селекторами, которые уже соответствуют именам моих классов Отказ

Я могу экспериментировать с этим в будущем.

Нахождение хорошего способа загрузки CSS в приложения, используя inventjs, стал немного миннойфильмом из-за подавляющее количество выборов У одного есть, каждая из разных преимуществ и последствий. На данный момент я проверяю это просто.

Объединение некоторых активов, таких как изображения и шрифты в код, могут привести к раздутому пачту, который занимает несколько мегабайт. Загрузчик файлов будет скопировать каждый актив, который он находит через требуемый («путь/к/файл»). требовать () вернется новый URL.

Это позволяет избежать раздува и позволяет браузеру загружать эти активы параллельно. Более того, активы загружаются только тогда, когда код, содержащий требуемый («путь/к/файл»), на самом деле выполняется, а не сразу после нагрузки страницы. Пользователю не нужно ждать, пока браузер загружает вещи, которые она никогда не увидит.

Хотели бы вы загрузить активой, как файл SVG, как Data-URL ? Нет проблем, URL-погрузчик сделает это. Вы даже можете дать ему посос файла, выше которого он вернется к поведению файловой загрузки.

Babel-Loader предпроцессирует свой вход с Бабел , как вы догадаетесь, но у него есть своя экосистема плагинов для настройки того, что Babel будет трансильным. Вы захотите настроить Babel-Loader, чтобы игнорировать все из сторонних библиотек, поскольку предположительно, что уже должно быть в ES5 для потребления в вашем коде.

Неспособность сделать это, приведет к тому, что процесс сборки займет гораздо дольше, в то время как Babel-Loader обрабатывает тысячи файлов под Node_Modules, только чтобы снова выдвинуть его, не делая никакой реальной работы.

Наконец, если вы собираетесь распространять свой проект в качестве импортируемого модуля, внешний ключ CONFIGE WEBPACK позволяет вам рассказать WebPack, что не подключить. Это было бы почти все, что NPM или пряжа установит, когда она устанавливает ваш модуль, чтение зависимостей в Package Package.json.

Неспособность сделать это приведет к значительному раздутому расслоению. Прежде чем я использовал внешний ключ, мой результирующий Bundle.js весил около 1,1 МБ. После настройки внешних, он обрезается до SVELTE 133 KB. Это делает место для нескольких переносов, а также немного ног.

Может быть несколько типов параноидальных типов, которые настаивают на приглушении каждая, и каждый выпуск каждой библиотеки их проект зависит, и, следовательно, желает заплатить премию за объединение всего, а кухонная раковина в их Bundle.js.

WebPack не заботится. Конечно, вам, возможно, придется объяснить, почему вы делаете это тем, чьи проекты потребляют ваш компонент.

В моем случае было несколько сторонних библиотек, которые я абсолютно должен был включить в My Bundle.js или приложение, которое потребляет его, не может импортировать его. Узел-узел-внешние Позволяет у вас есть тэк и съесть это тоже.

Например, вы можете настроить его для обработки всего под Node_Modules/как внешний, но белый список выбранных немногих, которые должны быть в вашем комплекте для вещей для работы вниз по течению. Я вернусь к этому в ближайшее время.

Мой проект отображает онлайн-калькулятор, который помогает людям определить, как долго они смогут позволить себе оставаться в различных ассистентных условиях. Это часть, которую я хочу сделать с Reactjs. Остальная часть этого состоит из статических страниц, таких как «о» «конфиденциальности» и введении.

Чтобы облегчить управление, я решил отделить обеспокоенность и разделить его на два проекта. Проект потребителей состоит из в основном статических страниц. Компонентный проект обеспечивает калькулятор со всей своей логикой. Затем потребитель включает компонент в одну из своих страниц, чтобы представить посетителям.

Компонентный проект содержит свои собственные стилы. Я хотел, чтобы они были включены в комплект, что потребительский проект включает в себя. Я также хотел держать все, кроме моего собственного кода и стилей из расслоения. Проект потребителей разрешит тех, кто основан на зависимостях, которые он импортирует из Package Project Project.json.

Я пробежал в зацепку, в первый раз, когда я пытался построить потребителя. Это жаловало, что он не знал, что делать с нужным (Путь/к/Стильheet) Теги. Проблема в том, что WebPack работает для потребителя, необходимый для доступа к погрузчикам WebPack, таких как CSS-Loader и SCSS-погрузчик, чтобы разрешить активы стилей в компоненте.

В автономном проекте эти погрузчики должны быть объявлены в качестве зависимостей только для разработки, поскольку они необходимы только для автономной сборки, но не браузера. Но если пучок будет включен в другое приложение в качестве компонента, и он загружает другие типы ресурсов, ему нужно будет сохранить эти погрузчики в комплекте для развертывания. Они все еще используются только для разработки, но они нужны Node.js при построении потребительского пакета.

В моем случае CSS-погрузчик, SCSS-погрузчик и файловой погрузчик должны были повторно классифицированы как безусловные зависимости, а не зависимыми. Это убедившись, что пряжа или NPM импортировали их в потребительский проект, наряду с компонентным проектом, поэтому он может использовать их для разрешения активных активов стилей и изображений, что компонентный проект уже в комплекте.

Мне было трудно получить псевдонимы пути к работе. Они позволяют писать «требовать (« @ lib/path/to/my/my-lib »)”, а не “требуют (‘../../../../путь/к/my/lib’ ) «Из глубокого в вашем каталоге исходного каталога проекта.

Babel-Plugin-модуль-резольвер может разрешить их. Я пытался настроить его под ключ «Бабела» в моем проектах Package.json, но это не сработало. Я наконец получил псевдонимы для работы, когда я перевел всю конфигурацию Babel в .babelrc, а не package.json и не webpack.config.js.

Не имею представления, почему те последние два метода не работают, но придумывать об этом, вкладывая все конфигурации Babel в .babelrc позволяет запускать Babel из командной строки, пряжи/NPM или через WebPack Babel-погрузчик с Одинаковая конфигурация.

Если обувь подходит, носить его.

Редактировать (3/13/2018) Позже я понял, что приготовление «Node_Path =/PATH/TO/SRC/» в свои команды сборки – это менее элегантный, но гораздо более надежный способ достижения этого.

WebPack – это мощный и полезен и упаковывает много добра для тех, кто строится в рамках проектов Front-End JavaScript. Он не ограничен реагированием проектов, но он поставляется с кривой обучения.

В зависимости от того, что вы пытаетесь достичь, могут быть много движущихся частей, которые должны быть настроены правильно, чтобы получить результат, который вы хотите.

Для справки, вот как я настроил мой webpack.config.js Отказ У меня есть отдельные файлы конфигурации для производства и разработки. WebPack-Merge Позаботьтесь о слиянии каждого с общими настройками в WebPack.config.js.

Некоторые жаловались, что документация, в то время как всеобъемлющая, не всегда делает хорошую работу по объяснению Для чего некоторые вещи и как их использовать.

Это особенно верно, когда дело доходит до некоторых плагинов. Больше примеров были бы очень полезны. WebPack по-прежнему довольно молод, поэтому я делаю ставку на то, что документация со временем улучшится, так как больше людей участвуют и начнут вносить вклад.

Тем не менее, уже есть некоторые отличные ресурсы, которые я нашел полезным или что я мог бы захотеть вернуться к: