ری اکت سریعتر و دوست داشتنی تر

parcel
parcel


سلام ، امروز تو starter kit های ری اکت یه چیز جالب دیدم اونم یه starter kit به اسم parcel بود که تو داخل خود document ش میگه.

Parcel is Fast, zero configuration web application bundler

معنی این متن میشه که parcel یه bundler مثل webpack ولی خیلی سریع تر خب تو این قسمت یه اپ react با این bundler می سازیم.

اول بسم الله parcel cli رو نصب می کنیم

npm i --g parcel-cli

بعد یه فولدر به اسم parcel-test می سازیم و npm رو اونجا intialize می کنیم

npm init --yes

با این کار npm یه فایل package.json برای ما می سازه که می تونیم باهاش پکیج های مورد نیازمون رو نصب کنیم
حالا با دستور زیر موارد مورد نیاز رو نصب می کنیم.

npm i --save react react-dom parcel-bundler babel-preset-react babel-preset-env babel-plugin-transform-class-properties
// bad in ro nasb conid bra babel
npm i --save-dev babel-core

بعد از نصب این وابستگی ها یه فایل .babelrc درست می کنیم تا به babel بگیم چیکار کنه

// .babelrc
{
 "presets": ["env", "react"],
 "plugins": ["transform-class-properties"]
}

بعد دستورات زیر رو به package.json اضافه می کنیم

"scripts": {
 "start": "parcel src/index.html",
 "build": "parcel build src/index.html --public-url ./"
  },

بعد یه فولدر src درست می کنیم و فایل های زیر رو داخلش می سازیم 

App.js index.js index.html

بعد از اینا می ریم سراغ index.html که به صورت زیر هستش

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>React with parcel</title>
</head>
<body>
    <div id="root"></div>

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

بعد index.js که اینطوری میشه

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

بعد از اینا فایل App.js رو درست می کنیم

import React from 'react';

const App = () => {
 return (
 <div>
            <h1>Hello World + React with parcel</h1>
            <p>this tutorial in virgoole.io</p>
        </div>
    )
};

export default App;

بعد از اینا نوبت به تست می رسه من سعی کردم سادگی رو حفظ کنم که قابل فهم باشه حالا کافیه با دستور زیر روی localhost بالا بیاریم این پروژه ساده رو

npm start 
// or
npm run start

با دستور زیر وقتی آدرس زیر رو تو مرورگرتون باز کنید پیام رو می بینید http://loaclhost:1234
اینم parcel که خیلی سریع تر از webpack هست از نظر امکانات نمی دونم ولی خروجی build که می دیده فوق العاده کم هست طوری که تو سایت خودشون گفتن

Based on a reasonably sized app, containing 1726 modules, 6.5M uncompressed. Built on a 2016 MacBook Pro with 4 physical cores

یه برنامه با 1726 ماژول و فشرده نشده اون شده 6.5 مگابایت که فک می کنیم این آمار آمار خوبی باشه برای اثبات خروجی کم حجم

اگه دوست دارید کد ها رو داشته باشین اینم repo github


اگه سوالی، نظری چیزی مد نظرتون هست بگید سعی می کنم سریع جواب بدم!