Сборка React проекта с помошью Parcel
Доброго времени суток, уважаемые посетители! Сегодня я хотел бы поговорить с Вами о том, что за зверь такой Parcel JS.
Порог входа в любую предметную область определяется, среди прочего, развитостью окружения этой предметной области. Под окружением понимается множество источников информации о данной предметной области, сообществом людей, заинтересованных в развитии данной предметной области, развитые средства разработки и т. д.
В последнее время порог входа в современный JavaScript стал определенно выше, и поэтому время необходимое для того чтобы освоить его на должном уровне также увеличилось. К тому же, помимо JavaScript надо знать еще большое количество других сопутствующих технологий из мира фронтэнда, которые на первый взгляд кажутся дремучим лесом.
Однако, у меня для Вас есть хорошая новость - современный JavaScript довольно быстро будет понят Вами, если Вы посмотрите мой последний видеокурс "Программирование на JavaScript c Нуля до Гуру 2.0". Переходите по ссылке и изучайте.
Однако, продолжим. Прогресс движется вперед и сегодня от web-страницы требуется не просто показать свое содержимое, а показать его как можно более интерактивно, чтобы привлечь потенциального клиента. Т.е. сегодня сайты - это не просто наборы страниц, к которым можно получить доступ по определенному адресу, а целые приложения со своей нетривиальной логикой, которая исполняется прямо в браузере компьютера.
Но писать на чистом JavaScript такую логику, постоянно изобретая колесо, это не дело. Поэтому были созданы и получили большое развитие JavaScript фреймворки, такие как **Angular, Vue, React **. Но, как я говорил выше, если в современный JavaScript порог входа достаточно высок, то что уж говорить об этих фреймворках. Но даже, если вы уже хоть немного разбираетесь в JavaScript, первоначальная настройка среды разработки - это далеко не простой процесс, а как же тогда перейти собственной к программированию, если застрял в разнообразных настройках десятков плагинов и инструментов, ведь аппетит, как говориться приходит во время еды.
Итак, далее я расскажу каким инструментарием я пользуюсь, сильно в подробности вдаваться не буду, но и сложные моменты не обойду мимо. А все ради чего? Ради того, чтобы показать Вам как можно быстро настроить среду разработки, чтобы познакомиться с новой технологией, не тратя время и нервы впустую.
Для начала: вся разработка ведется в VS Code - это бесплатный редактор кода от Microsoft. У Вас на ПК должен быть установлен NodeJS. Также поставьте менеджер пакетов yarn - это быстрая и безопасная альтернатива стандартному пакетному менеджеру Node npm.
Далее показан package.json файл, который ставит все необходимые пакеты для разработки React приложений на базе Parcel. А Parcel - это универсальный сборщик, который не надо настраивать, без необходимости, так как он поддерживает все необходимые компоненты, чтобы быстро начать писать React приложения. Parcel- это альтернатива всеми любимому Webpack.
{
"name": "parcel-react",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"dev": "npx parcel src/index.html",
"prod": "npx parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.4"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
Ставим так:
C:/> yarn
Рядом с файлом package.json есть папка src - с исходными кодами, ее структуру и содержание некоторых файлов я приведу ниже:
src:.
│ index.html
│ main.js
│
└───components
│ App.css
│ App.js
│
├───Content
│ Content.css
│ Content.js
│
├───Footer
├───Header
│ Header.css
│ Header.js
│
├───ProductCard
│ ProductCard.css
│ ProductCard.js
│
└───Sidebar
Sidebar.css
Sidebar.js
Файл main.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
ReactDOM.render(
<App />,
document.getElementById('app')
)
Файл index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Онлайн Магазин</title>
</head>
<body>
<div id="app"></div>
<script src="./main.js"></script>
</body>
</html>
В папке components лежат наши React компоненты.
Запускаем все это вот так (перейдя в папку с проектом):
C:/> yarn run dev
Если хотим собрать React проект в папку dist, то выполняем следующую комманду:
C:/> yarn run prod
На этом все уважаемые читатели. А как Вы собираете React проекты и интересна ли эта тема Вам вообще?
-
Создано 26.05.2020 13:54:21
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.