راه اندازی یک پروژه React با Parcel

مقدمه
وقتی صحبت از بسته نرم افزار وب است ، ParcelJS یک بسته نرم افزاری نسبتاً جدید است. Parcel خود را به عنوان یک مجموعه برنامه وب سریع و با پیکربندی صفر توصیف می کند.
Parcel بر این اساس کار میکند که ساختن برنامه های کاربردی با بسته های JavaScript می تواند آسان تر باشد. Webpack مسلماً محبوب ترین مجموعه در حال حاضر است ، که یک ابزار عالی میباشد و قدرت تنظیم را به شما می دهد. اما گاهی اوقات تنها چیزی که شما نیاز دارید یک ابزار حداقل است که به شما کمک کند در سریعترین زمان کار را شروع کنید.
این جاست که Parcel به کار می آید. Parcel خود را به عنوان یک ابزار سریع بسته بندی نرم افزاری با پیکربندی صفر تبلیغ می کند – تمام آنچه نیاز دارید اشاره روی آن در قسمت ورودی برنامه تان خواهد بود. Parcel همچنین ویژگی های زیر را ارائه می دهد:
• زمان سریع بسته بندی – Parcel به صورت قابل توجهی سریعتر از سایر ابزارهای بسته بندی است. در زیر تصویری از صفحه Parcel در Github آورده شده است.

• بسته بندی دارایی ها – Parcel شامل پشتیبانی خارج از جعبه برای دارایی های فایلی JS ، CSS ، HTML میباشد.
• تبدیل خودکار – تمام کدهای شما با استفاده از Babel ، PostCSS و PostHTML بطور خودکار تبدیل می شوند.
• تقسیم کد – Parcel به شما امکان می دهد تا بسته خروجی خود را با استفاده از import () dynmaic تقسیم کنید.
• جایگزینی ماژول دست اول (HMR) – همانطور که شما در طول توسعه تغییراتی ایجاد می کنید ، Parcel به طور خودکار ماژول ها را در مرورگر به روز می کند، و هیچگونه پیکربندی لازم نیست.
• ورود همراه با خطا – وقتی Parcel با خطا مواجه می شود ، فریم های کد برجسته شده دستور را چاپ می کند تا به شما در یافتن مشکل کمک کند.
نکته دیگری که در مورد Parcel باید به آن توجه کرد این است که برخلاف ماژول های JS به توسعه دهندگان این امکان را می دهد که از یک فایل index.html به عنوان نقطه ورود استفاده کنند.
در این آموزش یک برنامه React web را با Parcel تنظیم می کنید.
مرحله 1 – شروع کار با Parcel
برای شروع ، یک دیرکتوری کار جدید ایجاد کنید و با اجرای دستور زیر در ترمینال خود Parcel را نصب کنید:
⦁ $ npm install -g parcel-bundler
⦁
کار بعدی ایجاد فایل pack.json در دایرکتوری است. می توانید این کار را با اجرای دستور زیر انجام دهید:
⦁ $ npm init -y
⦁
این دستور یک package.jsonکاری برای شما تولید می کند.

ممکن است Parcel هر نوع فایلی را به عنوان نقطه ورود خود بپذیرد ، اما یک فایل HTML یا JavaScript نقطه مناسبی برای شروع است. اگر فایل اصلی JavaScript خود را در HTML با استفاده از یک مسیر نسبی پیوند می دهید ، Parcel نیز آن را برای شما پردازش می کند. فایل های index.html و index.js را ایجاد کرده و محتوای زیر را به آنها اضافه کنید:
index.html
<html>
<body>
<script src=”./index.js”></script>
</body>
</html>
Copy
index.js
console.log(“hello world”);

اکنون که فایل ها ایجاد شده اند ، شما آماده اجرای برنامه هستید. Parcel با سرور مجازی توسعه ای همراه است که در آن به طور خودکار برنامه شما را با تغییر فایل ها بازسازی می کند و از جایگزینی ماژول دست اول برای توسعه سریع پشتیبانی می کند. برای اجرای برنامه ، دستور ترمینال زیر را اجرا کنید:
⦁ $ parcel index.html
⦁
اکنون می توانید http: // localhost: 1234 / را در مرورگر خود باز کرده و کنسول را برای خروجی در کنسول بررسی کنید.

مرحله 2 – تنظیم یک پروژه با Parcel و React
در مرحله بعد شما یک پروژه React را با parcel تنظیم می کنید. قبل از ادامه ، باید برخی از متعلقات را نصب کنید:
⦁ $ npm i react
⦁
⦁ $ npm i react-dom
متعلقات بالا React و react-dom را در برنامه شما نصب می کند. از آنجا که React در ES6 نوشته شده است ، ما به راهی برای تغییر کد احتیاج خواهیم داشت. parcel این کار را برای شما بدون نیاز به تنظیمات انجام می دهد. تمام کاری که شما باید انجام دهید اینست که نصب تنظیمات اولیه را انجام دهید و parcel کار اصلی را برای شما انجام می دهد.
⦁ $ npm i babel-preset-env babel-preset-react –save-dev
⦁
پس از اتمام این کار ، یک فایل .babelrc ایجاد کرده و آن را با موارد زیر ویرایش کنید:
.babelrc
{
“presets”: [“env”, “react”]
}

اکنون Babel پیکربندی شده است تا ES6 / ES7 JavaScript را به یک مجموعهJavaScript با معنی برای مرورگرها تبدیل کند.
اکنون می توانید شروع به ایجاد برنامه React و مؤلفه های آن کنید. فایل index.html را باز کنید و آن را با کد زیر جایگزین کنید.
index.html
<!DOCTYPE html>
<html>
<head>
<title>React starter app</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com

/ajax/libs/bulma/0.6.2/css/bulma.min.css”>
</head>
<body>
<div id=”app”></div>
<script src=”./src/index.js”></script>
</body>
</html>

در مرحله بعد پوشه ای با عنوان src ایجاد کنید و در آن یک فایل index.js ایجاد کنید و آن را با موارد زیر ویرایش کنید:
src/index.js
import React from “react”;
import ReactDOM from “react-dom”;
import Header from ‘./components/Header’

class HelloMessage extends React.Component {
render() {
return <div>
<Header/>
<div className=”container”>
<h1>Hello {this.props.name}</h1>
</div>
</div>
}
}

let App = document.getElementById(“app”);

ReactDOM.render(<HelloMessage name=”Yomi” />, App);

این یک برنامه شروع اولیه React است. مؤلفه HelloMessage در فایل index.html در div با شناسه app ارائه می شود.
سپس ، یک مولفه Header ایجاد کنید. یک پوشه component ایجاد کنید و در آن ، یک فایل JS با عنوان Header.js ایجاد کنید و آن را با کد زیر ویرایش نمایید.
component/Header.js
import React from ‘react’
import ParcelLogo from “../img/parcel-logo.svg”;

const Header = () => (
<header>
<nav className=”navbar” role=”navigation” aria-label=”main navigation”>
<div className=”navbar-brand”>
<a className=”navbar-item” href=”/”>
<img width=”120″ src={ParcelLogo} alt=””/>
</a>
</div>
</nav>
</header>
)

export default Header

parcel همچنین از ورودی هایی مانند تصاویر پشتیبانی می کند. نکته دیگری که باید به آن توجه داشته باشید اینست که ، parcel همچنین با پشتیبانی SCSS نقل و انتقال انجام می دهد. برای استفاده از آن ، node-sass را نصب کنید:
⦁ $ npm i node-sass

پس از نصب node-sass ، می توانید فایل های SCSS را از فایل های JavaScript وارد کنید. در فایل index.js خود ، برای وارد کردن فایل SCSS ، خط کد زیر را در بالای فایل اضافه کنید:
index.js
import ‘./scss/app.scss’
…
همچنین بیایید فایل app.scss را نیز ایجاد کنیم. یک پوشه با عنوان scss ایجاد کنید و فایلی با عنوان app.scss آماده کنید و آن را با موارد زیر ویرایش کنید:
scss/app.scss
body {
background-color: #fefefe;
text-align: center;
.navbar {
background: #21374B;
color: #E7DACB;
height: 50px;
}
h1 {
font-size: 40px;
margin-top: 30px;
}
}

اکنون که تنظیم برنامه React را انجام داده اید ، آن را اجرا کنید و ببینید که آیا کار می کند یا خیر. برای انجام این کار ، باید یک سرور مجازی dev را راه اندازی کنید و package.json را پیکربندی نمایید. خط کد زیر را به فایل pack.json اضافه کنید:
package.json
“scripts”: {
“start”: “parcel index.html”
},

این بدان معناست که هر وقت فرمان npm start را اجرا کردید ، به Parcel می گویید که یک سرور مجازی توسعه را با استفاده از فایل index.html به عنوان یک فایل ورودی شروع کند. فرمان شروع npm را اجرا کنید و هم اکنون می توانید برنامه React را در http: // localhost: 1234 با پشتیبانی از لود مجدد ماژول دست اول مشاهده کنید.

مرحله 3 – ساختاربندی برای تولید
برای تهیه برنامه خود برای تولید با Parcel ، باید دستور parcel build index.html را اجرا کنید. آن را به آبجکت اسکریپت ها در فایل pack.json اضافه کنید.
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html”
},
هنگامی که دستور npm run build را اجرا کردید ، Parcel ممکن است حالت تماشا و تعویض ماژول را غیرفعال کند تا فقط یک بار ساخته شود. همچنین کوچک کننده را برای کلیه بسته های خروجی فعال می سازد تا اندازه فایل را کاهش دهد. فرمان build همچنین حالت تولید را فعال می سازد که متغیر محیط NODE_ENV=production را نیز تنظیم می کند.
Parcel همچنین برخی گزینه ها را در اختیار شما قرار می دهد تا بتوانید نحوه انتخاب برنامه خود را برای حالت تولید انتخاب کنید.
اگر دایرکتوری دیگری را برای Parcel ترجیح می دهید که فایل های تولیدی را در آن قرار دهد (dist دیرکتوری پیش فرض میباشد) ، می توانید با اضافه کردن –out-dir-name-name در انتهای کلید build در pack.json آن را مشخص کنید. شبیه به زیر خواهد بود:
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html –out-dir directory-name”
},
Copy
If you’d like to disable minification w

اگر مایل هستید کوچک سازی را که تنظیم پیش فرض است غیرفعال کنید ، می توانید این کار را با افزودن –no-minify در انتهای کلید build در package.json انجام دهید. بنابراین اینگونه به نظر می رسد:
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html –no-minify”
},

اگر می خواهید حافظه نهانگاه سیستم را غیرفعال کنید ، می توانید این کار را با افزودن no-cache به انتهای کلید build در pack.json انجام دهید ، بنابراین اینگونه خواهد بود:
package.json
“scripts”: {
“start”: “parcel index.html”,
“build”: “parcel build index.html –no-cache”
},

می توانید اطلاعات بیشتر در مورد گزینه های مختلف را در اینجا بخوانید.
نتیجه
در این آموزش ، شما یک برنامه وب را با Parcel بسته بندی کرده اید. Parcel هنوز هم نسبتاً جدید است و حمایت از آن هر روز در حال افزایش است. مورد استفاده از آن ممکن است با Webpack متفاوت باشد ، اما این یک ابزار بسته نرم افزاری است که می تواند در توسعه وب روزمره شما مورد توجه قرار گیرد.
برای دیدن مشکلات و ارسال PRها می توانید به Parcel repo در این لینک مراجعه کنید.
کد پایه این آموزش را می توان در GitHub بیابید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade