Всі ми відчували біль, починаючи працювати з React і витрачаючи години на те, щоб налаштувати webpack, перш ніж розпочати роботу.
Create React App був створений для того, щоб спростити й пришвидшити розгортання проекту. Але в ньому був суттєвий мінус — він приховував конфігурацію webpack. Поступово ваш застосунок зростав і у вас виникала потреба у чомусь більш просунутому. Ви вилучали Create React App і отримували величезний файл конфігурації. Так ви повертались до першопочаткової проблеми — вам необхідно було вивчити webpack.
Нещодавно з'явився новий пакувальник веб-застосунків — Parcel — для якого, начебто, потребується нульова конфігурація! Це звучить занадто добре, щоб бути правдою. Але схоже, що він дійсно вирішує всі наші проблеми.
Я спробував його на великій кодовій базі, і він спрацював «із коробки»! Він навіть надав мені оптимізований пакет. Мені знадобилися дні, щоб оптимізувати цей же пакет, використовуючи webpack.
Здається, у цього інструмента є потенціал. Подивімося, як з ним створити React застосунок з нуля.
Створення React застосунку з допомогою Parcel
Створимо новий NPM застосунок:
mkdir react-parcel
cd react-parcel
npm init
npm init задасть вам купу питань. Просто натискайте Enter для значень за замовчуванням.
Встановлюємо залежності для React, babel та Parcel:
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. Цей файл повідомляє parcel про те, що ми використовуємо ES6 та React JSX.
{
"presets": ["env", "react"]
}
І нарешті створюємо наш react застосунок. Це всього лише два файли:
index.js
import React from "react";
import ReactDOM from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
index.html
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Тепер потрібно додати точку входу у скрипт до package.json, щоб мати змогу запускати застосунок:
"scripts": {
"start": "parcel index.html",
},
Ми все зробили. Запустимо наш застосунок.
npm start
Ви маєте використовувати node 8 (або більш пізню версію). Перейдіть тепер на http://localhost:1234, щоб побачити застосунок!
Повний вихідний код можна знайти на Github.
Ще немає коментарів