PARCEL – это веб-приложение Bundler, который позволяет вам подняться с нулевой конфигурацией
В отличие от других бундов, таких как WebPack, посылка не требует, чтобы вы написали много кода, чтобы начать работу
Он предлагает пылаю быструю производительность, потому что он использует многоядерную обработку, где другие работают от сложных и тяжелых преобразований
- 📍 Регистрация ошибок => обеспечивает выделенный синтаксис в коде, когда он сталкивается с ошибкой
- 🔥 Замена горячего модуля (HMR) => автоматически обновляет модули, поскольку вы вносите изменения в развитие
- ✂️ Code Spliting => использует синтаксис импорта () для расщепления вашего пучка
- 💻 Автоматические преобразования => Код автоматически преобразуется с использованием Babel, PostCSS и PostHTML
🔥 И многое другое!
Создать новый NPM (или с вашим предпочтительным приложением пакета)
mkdir my-awesome-app cd my-awesome-app npm init
🔥 NPM init будет задать вам кучу вопросов, если не хочу их отвечать, прикрепить на -y в конце: NPM init -y
Давайте установим зависимости 📦
- Реагировать
- Варить
- Посылка
npm install --save react npm install --save react-dom npm install --save-dev @babel/preset-react npm install --save-dev @babel/preset-env npm install --save-dev parcel-bundler
Создать файл .babelrc
{
"presets": ["@babel/preset-react"]
}
Создайте файл index.html
🍕
Создайте файл index.js
import React from "react";
import ReactDOM from "react-dom";
function App () {
return This is my amazing app
}
const mount = document.getElementById("app");
ReactDOM.render(Добавьте точку входа в наш Package.json
"scripts": {
"start": "parcel index.html",
},
npm start
Были сделаны! Мы можем просмотреть наше приложение на http://localhost: 1234
Обложка изображения от: https://www.woolha.com/media/2018/09/using-parlejs-bundler-fol-building-reactjs-Application-1200×627.jpg.
Оригинал: “https://dev.to/thatgalnatalie/how-to-set-up-a-react-app-using-parcel-58e0”