Parcel + preact from scratch

от

Начинаем проект на preact, и используем в качестве сборщика Parcel.

Во первых почему preact ?

Потому что он маленький. Я использовал раньше для своих проектов на фронте RiotJS, он тоже маленький, но проекты были большие и дальше 3-ей версии совместимость потерялась, поэтому я так и остался на 3ей версии Riot’а. Но понятно, даже если Riot супер хорош и супер мал и супер быстр, то если его мало кто использует, его и мало кто сможет поддерживать в будущем 🙁 Поэтому надо смотреть в сторону популярных фреймворков.

Vue большой, хороший, удобный, понятный, со своей магией, которая заставляет тебя порой материться, но он хорош. Столкнулся я только с тем, что на большом проекте + webpack он жутчайше долго компилируется.

React хорош, но он тоже большой.

А вот preact это по сути тот же React, но маленький, как Riot и хочется думать настолько же быстрый. Поэтому остановился на нем.

Теперь, почему Parcel ? Потому что webpack могуч и велик, но медленный 🙁 Я собираю проекты в PHP и то что будет «активным» в браузере, должно встраивается безшовно, поэтому я хочу написать код, перейти в браузер, нажать F5 и увидеть результат. Прям как во Flutter 😉 Поэтому пошел искать другие сборщики. Vite меня по скорости устроил, но жутко расстроил по настройке именно сборки, вроде все есть, но нет watch режима, т.е. когда он следил бы за файлами и обновлял в dist папке уже готовый результат.

А вот в Parcel такая возможность есть. npx parcel watch src/index.html и вот он тебе уже в папке dist строит build для проекта на PHP в котором ты можешь уже посмотреть результат.

В общем мотивация ясна и понятна, приступаем. открываемся в новой папке

npm init -y
npm install --save-dev parcel
npm install preact

создаем точку входа src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script type="module" src="./index.js"></script>
</body>
</html>

создаем файл src/index.js, который в HTML подключаем как type=»module».

import { render } from "preact";
import App from './app.jsx';

render(<App />, document.querySelector('#app'));

чтобы у нас был компонент так же создаем файлик src/app.jsx

export default function App() {
    return <h1>Hello world</h1>
}

тут все максимально просто и должно быть понятно, т.е. начинаем с index.html, в котором есть точка монтирования <div id=»app»></div>

index.js запускает preact и рендерит в точке монтирования компонент App, который импортируем из файла app.jsx

теперь самое интересное, чтобы parcel мог все это собирать, надо в файле package.json прописать alias’ы.

{
    "name": "parce2-preact",
    "version": "1.0.0",
    "description": "",
    "source": "src/index.html",
    "scripts": {
        "build": "parcel build",
        "start": "parcel"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "parcel": "^2.7.0"
    },
    "alias": {
        "react": "preact/compat",
        "react-dom": "preact/compat",
        "react/jsx-runtime": "preact/jsx-runtime"
    },
    "dependencies": {
        "preact": "^10.11.0"
    }
}

«source»: «src/index.html» — это точка монтирования, чтобы в script’ах не надо было указывать.

а вот alias — это как раз то как бы говорит как я понял parcel’у что это как будто React но подставляет вместо него Preact.

ну и все, а для того чтобы из PHP можно было найти и подключить файлы из dist директории, то можно использовать какой нибудь плагин для Parcel который создает для нас manifest

например это может быть https://coder.social/autifyhq/parcel-reporter-bundle-manifest

устанавливаем:

npm install --save-dev parcel-reporter-bundle-manifest

создаем файл: .parcelrc

{
  "extends": "@parcel/config-default",
  "reporters": ["...", "parcel-reporter-bundle-manifest"]
}

собираем через npx parcel build , ну или через npm run build и у нас в dist создается файл parcel-manifest.json вот в таком красивом виде:

{"index.html":"/index.html","index.js":"/index.f25bf817.js"}

запускаем наш проект на PHP командой php -S localhost:8080 получаем файлы через manifest подключаем к проекту и радуемся результату.

1 комментарий к “Parcel + preact from scratch”

  1. в плагине parcel-reporter-bundle-manifest обнаружился дефект.
    если в поставить путь в parcel build —public-url ./ то в результате в index.html получится src=»file.js» а вот в манифесте будет «index.js»:»./file.js» т.е. путь ./ плагин манифеста не понимает.

Оставьте комментарий