4 крутых настройки всего за 4 минуты
Когда мы говорим о сборщиках модулей для Интернета, сразу приходит на ум webpack. Конечно, он работает хорошо, но у него есть один большой недостаток.
Webpack сложно настроить. Даже для первого простого примера кода в официальной документации нам понадобится файл конфигурации - печально известный webpack.config.js.
Именно здесь на помощь приходит Parcel - пакетировщик - это инструмент с нулевой конфигурацией.
Верно, нам не нужно сначала создавать файл конфигурации - Parcel точно знает, что нам нужно.
Вот несколько примеров, которые наверняка вас заинтересуют.
Привет, мир с посылкой
Все, что вам нужно, это интерфейс командной строки - он сделает всю работу за вас.
Вы можете установить его следующим образом:
yarn global add parcel-bundler npm install -g parcel-bundler
Затем вы запускаете npm init -y или yarn init -y и создаете index.html.
Теперь вы можете написать код. Вы можете легко включить файл JavaScript с тегом сценария и выполнить код. Parcel это понимает. Код JavaScript автоматически минимизируется, имена переменных меняются, и код компилируется.
Это означает, что современные функции JavaScript и синтаксический сахар превращаются в безопасный для браузера код. Вот пример.
В коде вы можете увидеть стрелочную функцию и класс. Оба являются «продвинутыми» функциями JS. Обратитесь к сценарию из index.htm с тегом сценария. Затем запустите parcel build index.html. Готово - рабочая версия сайта сохранена в каталоге «dist».
Вот как выглядит рабочий JavaScript:
Да, без ключевого слова класса и без стрелочной функции. Parcel оптимизировал наш код без каких-либо настроек или конфигураций.
Время для TypeScript!
TypeScript очень удобен. Но у него есть небольшой недостаток - сначала нужно настроить TS. Но даже здесь Parcel нам помогает. Просто вернитесь в свой index.html и импортируйте app.ts вместо app.js - да, это правильно, даже если он кажется вам незнакомым.
Используя parcel index.html в качестве сервера разработки или parcel build index.html в качестве производственной сборки, вы можете запускать код.
Вот простой пример кода TypeScript:
function doubleNumber(a: number):number {
return a * 2;
}
console.log(doubleNumber(20))
Код автоматически преобразуется в код JavaScript программой Parcel.
Но, а как насчет фреймворков?
Давайте посмотрим на React.js (да, это библиотека, но вы поняли).
Во-первых, нам нужно установить все, что нужно для работы React: npm install react react-dom. Как и раньше, у нас есть только index.html, который импортирует наш app.js. В app.js мы можем написать следующий код:
Все это кажется знакомым, не так ли? В текущей версии React & CRA вам больше не нужен оператор импорта. В Parcel вы это делаете - это единственная реальная разница.
WebAssembly!
Хорошие новости: опять же, вам не нужно ничего устанавливать. Чтобы превратить C-код в WebAssembly, мы используем онлайн-среду IDE webassembly.studio.
Откройте его, выберите «Пустой проект C». Затем перейдите на main.c и добавьте следующую функцию:
int add(int a, int b) {
return a + b;
}
Затем выберите «построить» вверху панели. Теперь вы можете загрузить main.wasm, щелкнув правой кнопкой мыши вкладку файлов слева.
Рядом с app.js и index.html он входит в наш проект.
Wasm-файл содержит скомпилированный код WebAssembly - он больше не читается человеком.
Теперь мы можем вызвать функцию, которую только что написали на C, в app.js:
import { add } from "./main.wasm"
console.log(add(2, 4))
В консоли браузера вы должны теперь увидеть цифру «6» в качестве вывода - поздравляем, вы только что использовали C-функцию в Интернете!
Приятно иметь: прямая поддержка JSON
На самом деле работать с JSON в JavaScript не так уж и сложно. Исключение составляют случаи, когда у нас есть JSON в виде файла и мы хотим его импортировать. Опять же, Parcel помогает и творит чудеса незаметно для нас.
Помимо app.js и index.html, я создаю cars.json со следующим содержимым:
Мы можем легко импортировать и использовать этот файл JSON в app.js:
import cars from "./cars.json" console.log(cars.Lambo.color) // "green"
Подводя итоги
Я не ненавижу веб-пакеты. Однако даже для небольших проектов в Webpack есть что настроить. Вот почему мне нравится Parcel, особенно для небольших приложений. Вам также следует взглянуть на официальную документацию. Он снова и снова показывает, как Parcel можно использовать с довольно необычными технологиями. Относительно новым является, например, поддержка Rust & Elm.
Спасибо за чтение!
