Пакет — это сборщик веб-приложений, отличающийся опытом разработки. Он предлагает невероятно высокую производительность при использовании многоядерной обработки и не требует настройки. С помощью Parcel вы можете быстро загружать модули с синтаксисом модулей CommonJS и ES6 .
Работа с веб-пакетом была непростой задачей, поскольку требовала большой настройки. Хотя все сегодняшние инструменты сборки CLI построены на веб-пакете, но Parcel создан, чтобы избавиться от множества настроек и предоставить нам чистую структуру приложения. parcel очень быстр по сравнению с веб-пакетом.
Parcel Web Application Bundler
Более подробную информацию вы можете получить на его официальном сайте. Он предоставляет следующие возможности.
- Молниеносно быстрое время сборки.
- Посылка имеет встроенную поддержку JS, CSS, HTML, файловых ресурсов и т. д. — плагины не требуются.
- Код автоматически преобразуется с помощью Babel, PostCSS и PostHTML, когда это необходимо — даже
- Используя динамический синтаксис import () , Parcel разделяет ваши выходные пакеты, поэтому вы загружаете только то, что необходимо при начальной загрузке.
- Parcel автоматически обновляет модули в браузере, когда вы вносите изменения во время разработки, настройка не требуется.
- Parcel печатает выделенные синтаксисом фреймы кода при обнаружении ошибок, чтобы помочь вам точно определить проблему.
Теперь мы увидим, как мы можем использовать parcel в нашем веб-приложении шаг за шагом.
Шаг 1 : Установите Parcel.
Сначала установите Parcel с помощью Yarn или npm:
Пряжа:
пряжа global add parcel -bundler
npm:
npm install -g parcel-bundler
Теперь создайте папка нового проекта.
Шаг 2: Создайте три файла внутри нового проекта.
Нам нужно создать три файла.
- index.js
- main.js
//main.jsexport const add_fn = (x, y) => {return parseInt ( x) + parseInt (y);}
Теперь импортируйте этот файл в
//index .jsimport {add_fn} from './main';alert(add_fn(5,4));
Наконец, включите этот файл в index.html файл.
Практика ParcelJS Шаг 3. Просто запустите parcel index.html.
Просто запустите parcel index.html , чтобы запустить сервер разработки.
Теперь перейдите в браузер и нажмите http://localhost: 1234/. Вы можете увидеть окно предупреждения, в котором говорилось девять, как Сумма. Вот и все. Вам не нужен какой-либо другой файл конфигурации, связанный с config.js . Вы можете изменить номер порта по умолчанию с помощью следующей команды.
parcel index.html -p 3000Parcel создает папку dist и один JS-файл. Он динамически добавляется в наш HTML-файл и запускает этот связанный код. Если вы видите исходный код страницы вашего файла index.html . Вы можете увидеть что-то вроде этого.
Итак, Parcel обрабатывает все. Мы можем использовать препроцессоры, такие как Sass, Less. Мы можем использовать Parcel с React.js или P arcel с Vue.js или Parcel с Typescript . В этом случае потребуются некоторые конфигурации babel, но это уже тема другого дня. Итак, пример Parcel Web Application Bundler окончен.
