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

Что такое посылка и почему вы должны заботиться

Посылка – Веб Бунглан, вы будете любить.

Автор оригинала: Catalin Tudorache.

Пару недель назад я обнаружил Посылка – относительно новый JavaScript Bundler, который требует Ноль конфигурация. Это действительно быстро и весело работать с!

Что такое Bundler?

Если вы не знаете термин, я постараюсь объяснить это на простом английском языке. В тот день, когда веб-разработка была основана на ванильном JS или jQuery, разработчики не нуждались в модных инструментах. Было достаточно написать ваши JS в файл и загрузить этот файл в index.html Отказ То, как мы – веб-разработчики – пишущие код сегодня изменились с подъемом веб-фреймворков; Теперь браузеры не понимают весь код высокого уровня, который мы пишем, следовательно, требуется преобразование. Это преобразование сделано БУндлером.

Почему еще один биндер?

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

  1. Ну, прежде всего, вам не нужно писать какую-либо конфигурацию; Работает как магия – вы должны попробовать сами.
  2. Посылка имеет встроенный сервер разработки, который поддерживает Замена горячего модуля из коробки. Это означает, что, как только вы сохраните новые изменения, посылка перестроила изменения и отправляет их в браузер.
  3. Другое охлаждение из функции коробки – Код расщепления И это полезно для ленивой нагрузки. Скажите, что ваше приложение имеет 3 страницы, одна из которых является страница регистрации, а остальные два доступны только тогда, когда пользователь вошел в систему. Вместо того, чтобы иметь один с одним гигантским расслоением и загрузки все сразу, вы можете сделать один пакет только для регистрационного компонента. Отказ Предполагая, что пользователь не вошел в систему, когда он/она будет получать доступ к вашему приложению, браузер загрузит только пакет регистрации, что приведет к более быстрому времени загрузки и неподвижным UX.
  4. Посылка делает все это быстро.

Как насчет производства?

Если вы хотите, чтобы ваш производственный пакет, вместо бега Parcel Watch Index.html Вы бегаете Parcel Build index.html Отказ Эта команда будет генерировать готовую добычу, министерзированное расслоение.

Почему вы должны попробовать это

Вы можете попробовать его в паре сценариев:

  1. У вас не готова ваша ботина, и вы хотите сделать что-то действительно быстро.
  2. Вы новичок, и вы не хотите иметь дело с WebPack. (Кстати, когда вы чувствуете себя достаточно уверенно, вы должны определенно попробовать WebPack. Проблемы хороши для выращивания)
  3. Вы хотите научить кому-то несколько концепций Frontend, и вы хотите пропустить конфигурацию

Быстрая реакция + пример посылки (5 минут ⏱)

Я представлю реактивный пример, поскольку в настоящее время React – мое оружие, а также с Vuue, но Vue это не моя вещь.

Обязательные шаги

Создать папку Project и инициировать Package.json

mkdir react-parcel
cd react-parcel
npm init -y

Установка реагирования и посылки

npm i -S react react-dom
npm i -D parcel

Создать index.html.




    
        React + Parcel

Создать index.js.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Hello extends Component {
  render() {
    return 
Hello {this.props.name}!

  }
}

ReactDOM.render(, document.getElementById("app"));

Теперь вы готовы бежать ./node_modules/.bin/parcel index.html Отказ Вы должны быть в состоянии получить доступ к localhost: 1234 в браузере и посмотрите свое приложение. Измените название PROP и сохранить. Ваши изменения будут видны в браузере.

Это все, что вы должны сделать! Теперь вы можете сосредоточиться на написании кода.

Дополнительные – Рекомендуемые шаги

Добавьте строку скрипта в Package.json

...
  "scripts": {
    	...
    	"dev": "./node_modules/.bin/parcel index.html"
    }
...

Отныне вы можете запустить NPM запустить dev И получить сервер развития.

Добавить Вавилон

Установите Babel и некоторые полезные предустановки Babel, бежим NPM I -D Babel-Cli Babel-Presets-env Babel-Presets-React Отказ Babel нужно знать об этих пресетах, поэтому нам нужно создать .babelrc Со следующим контентом:

{
  "presets": ["env", "react"]
}

Заключение

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

Читайте ещё по теме: