📦 Посылка v1.7.0:

Сегодня я рад выпустить Parcel v1.7.0, огромный выпуск с множеством новых функций и улучшений! Проверьте это на Github.

Со времени последнего выпуска Parcel продолжал совершенствоваться с головокружительной скоростью. Parcel v1.7.0 включает более 15 ГЛАВНЫХ новых функций, а также исправляет множество ошибок. Основные моменты включают в себя:

🖖 Поддержка Zero config Vue из коробки! - Parcel теперь имеет полную поддержку .vue файлов из коробки без дополнительных модулей или конфигурации, включая поддержку препроцессоров, таких как CoffeeScript, Jade и Stylus, с ограниченной областью действия. стили, модули CSS, функциональные шаблоны и горячая замена модулей!
💰 Имена пакетов с хешированием содержимого для долгосрочного кэширования - теперь Parcel поддерживает долгосрочное кэширование ресурсов с использованием новой стратегии именования файлов, которая включает хэш содержимого файла при сборке для производства. Теперь при изменении пакета изменится и его имя файла. Исходные пути к файлам теперь также сохраняются для HTML и других файлов, которые должны иметь предсказуемые ссылки.
🕵️‍♂️ Более быстрый преобразователь, поддерживающий псевдонимы, абсолютные пути и пути с тильдой - преобразователь модуля Parcel был полностью переписан и теперь поддерживает псевдонимы (так что вы можете, например, псевдоним react на preact), а также пути /absolute и ~/tilde к разрешить в корень проекта легче, чем ../../../relative/paths. Новый преобразователь также работает намного быстрее, особенно при построении из кеша.
🧙‍♂️ Автоматически устанавливать недостающие зависимости в коде - теперь Parcel автоматически устанавливает недостающие зависимости npm, которые вы require или import в коде, с помощью yarn или npm. Когда вы разрабатываете и импортируете новую зависимость, вам больше не нужно переключаться на терминал для ручной установки npm, Parcel позаботится об этом за вас!
☕️ Поддержка ресурсов GLSL - теперь Parcel поддерживает импорт кода GLSL для использования с WebGL! Для этого используется glslify, так что вы можете даже require файлы GLSL друг от друга. Спасибо Владиславу Батыренко за предоставление этой функции. 🙏
🐶 Поддержка Pug and Jade - файлы Pug и Jade теперь поддерживаются "из коробки", плагин не требуется! Спасибо Максиму Карелову за эту статью. 😍
🚨 Наложение ошибок HMR. Когда вы разрабатываете с горячей заменой модуля и пишете синтаксическую ошибку, теперь вы получите наложение поверх приложения с некоторыми подробностями о проблеме. Благодарим Leta Montopoli за вклад в эту функцию. 👍
👌 Множество исправлений и улучшений!

Огромное спасибо сообществу за ваш вклад. 🙏

Поддержка Vue

С первого дня поддержка Vue была самой востребованной функцией Parcel, получив более 100 центов на Github. Реализовать это в Parcel оказалось немного сложно, но после нескольких улучшений архитектуры мы дошли до цели. И мальчик это хорошо! 👌

Из-за существующей архитектуры Parcel с нулевой конфигурацией .vue файлы, содержащие практически любой язык, просто работают "из коробки". Сюда входят языки шаблонов, такие как Pug и Jade (также добавленные в этом выпуске), языки стилей, такие как Stylus, SASS и LESS, и языки сценариев, такие как CoffeeScript и TypeScript. Модули CSS также поддерживаются вместе со стилями с заданной областью. Все это требует нулевой настройки.

Горячая замена модулей также работает полностью автоматически - ваши компоненты будут повторно отображаться на месте по мере разработки вместе с вашими стилями.

В качестве тестового приложения я обновил пример приложения Vue Hacker News, чтобы использовать для сборки Parcel вместо Webpack. Это привело к удалению около 400 строк кода конфигурации и сборки, а также удалению 27 зависимостей из package.json. В остальном код работал без изменений! Ознакомьтесь с различием для более подробной информации.

Спасибо Shawn Presser и Jasper DeMoor за работу над этой функцией! 🏆

Имена хешированных пакетов контента

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

Parcel теперь поддерживает именно это, и он включается автоматически при сборке для производства. У нас есть новая стратегия именования файлов, которая автоматически определяет ресурсы, которые должны иметь предсказуемые ссылки, которые не должны меняться между сборками (например, файлы HTML), и исключает их из хеширования. Вместо этого эти файлы сохраняют свое исходное имя файла и относительный путь. Таким образом, если вы сделаете ссылку на ./foo/bar.html из index.html, будет создан файл с именем dist/foo/bar.html.

К статическим ресурсам, таким как изображения, скрипты и файлы CSS, добавляется хэш содержимого, и они помещаются в каталог верхнего уровня. Например, если у вас есть файл JS с именем script.js, может быть создан выходной файл с именем dist/script.af53de.js.

Более быстрый преобразователь, поддерживающий псевдонимы, абсолютные пути и пути с тильдой

Первоначально Parcel использовал модуль npm под названием browser-resolve для выполнения всех разрешений модуля. Этот модуль реализует Node алгоритм требования разрешения, используемый большинством сборщиков.

Parcel v1.7.0 включает новый преобразователь, написанный с нуля, чтобы быть намного быстрее и расширяемо. Наряду со стандартным алгоритмом требуемого разрешения преобразователь Parcel поддерживает 3 новые функции: псевдонимы, /absolute путей и ~/tilde путей.

Псевдонимы. Псевдонимы были очень востребованной функцией и в основном позволяли вам переопределить разрешение конкретного модуля как в коде вашего приложения, так и в любых других используемых вами модулях node_modules. Чтобы использовать его, просто добавьте поле alias в package.json своего приложения. Например, чтобы заменить react на preact во всем коде вашего приложения: {"alias": {"react": "preact"}}.
Пути с тильдой. Иногда надоедает писать длинные относительные пути, например ../../../some/file.js. Было бы неплохо иметь возможность легко ссылаться на корень вашего проекта или модуля? Пути тильды позволяют вам это делать. Просто напишите вместо этого ~/some/file.js, и он будет разрешен относительно ближайшей папки node_modules или корня вашего проекта.
Абсолютные пути. Абсолютные пути работают так же, как и пути с тильдой, за исключением того, что вместо разрешения относительно ближайшего модуля они всегда разрешаются относительно корня проекта.

Наряду с этими функциями новый преобразователь Parcel значительно быстрее, чем предыдущий, особенно при построении из кеша. В одном большом проекте я видел, как время сборки увеличилось с 4,93 до 1,40 с при сборке из кеша!

Автоматически установите недостающие зависимости в код

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

По мере разработки вам может потребоваться добавить в проект новую библиотеку из npm. Обычно вам нужно переключиться на терминал и установить его вручную. В Parcel v1.7.0 в этом больше нет необходимости. Просто добавьте для него require или import в свой код, и Parcel автоматически установит его для вас с помощью yarn или npm при сохранении. Это похоже на разработку, когда все модули на npm уже предустановлены!

Спасибо Дэвиду Нагли за реализацию этой функции! 😍

Попробуйте!

Parcel v1.7.0 - ОГРОМНЫЙ выпуск, но мы все еще только начинаем. Не могу дождаться, чтобы увидеть, что вы с ним сделаете!

Пожалуйста, сообщайте о любых ошибках, которые вы обнаружите на Github. Вы также можете найти меня @devongovett в Twitter.