Javascript Disabled!

Please Enable Javascript if you disabled it, or use another browser we preferred Google Chrome.
Please Refresh Page After Enable

Powered By UnCopy Plugin.

وب پک برای React


وب پک برای React

معرفی Webpack for React

Webpack for React یک سیستم بسته‌بندی ماژول در بالای NodeJS است و یک بسته‌کننده برای برنامه‌های جاوا اسکریپت مدرن است. هدف اصلی Webpack for React این است که فایل های JS را برای استفاده در مرورگرها دسته بندی کند. Webpack در React زمانی که برنامه را پردازش می‌کند، به صورت داخلی، و یک نمودار وابستگی از یک یا چند نقطه ورودی ساخته می‌شود که هر ماژول را که دارایی‌های استاتیک هستند، ترکیب می‌کند.

خوراکی های کلیدی

  • اگرچه ایجاد یک برنامه react معمول است، مهم است که توجه داشته باشید که وب پک برای React در پشت برنامه چگونه کار می کند زیرا ایجاد برنامه react به انتزاع فرآیند وب پک کمک می کند.
  • پیکربندی Webpack برای React کنترل کاملی بر محیط توسعه می دهد که بسیار بهتر از مقداردهی اولیه برنامه react است که از پیکربندی های سفارشی به روش پیش فرض جلوگیری می کند.
  • راه اندازی Webpack برای React در مرحله اولیه دشوار است، زیرا وب پک یک اکوسیستم نسبتاً باز است.
  • ویژگی‌های پیکربندی از یک طرح نام‌گذاری پیروی می‌کنند که پیگیری آن را آسان‌تر می‌کند، زیرا کاربر همچنان به توسعه یک بسته وب برای واکنش ادامه می‌دهد.
  • به طور کلی، به کنترل کامل هر جنبه توسعه کمک می کند.

Webpack برای React چیست؟

همانطور که ما کد می نویسیم، یک شکاف قابل مشاهده بین کد جاوا اسکریپت و کدهایی که مرورگرها اجرا و درک می کنند وجود دارد. از این رو، برای درک این شکاف، توسعه‌دهندگان به منابع مختلف و ویژگی‌های دیگری وابسته هستند که در مرورگرهای مدرن پشتیبانی نمی‌شوند، در اینجا، بیشتر باندلرهای جاوا اسکریپت برای پر کردن این شکاف استفاده می‌شوند. و بهترین باندلر ماژول در Webpack برای React، برای مرور متقابل و حفظ کنترل کامل برای توسعه دهندگان استفاده می شود و برای سفارشی سازی باز است.

چرا از Webpack برای React استفاده کنیم؟

جایگزین های دیگری مانند Browserify، Brunch، و Parsel نیز وجود دارد، اما Webpack ماژول به طور گسترده پذیرفته شده و مورد استفاده است که شایستگی خود را در جامعه جهانی توسعه ReactJS ثابت کرده است.

برخی از مزایای استفاده از Webpack برای React عبارتند از:

  • پایداری React Application را افزایش می دهد.
  • زمان توسعه را با قابلیتی به نام «تعویض ماژول داغ» بهینه می‌کند.
  • کنترل مطلق React Build System را دارد.

چگونه Webpack را برای React ایجاد و راه اندازی کنیم؟

شبیه به ایجاد برنامه React، Webpack React یک ابزار خط فرمان است که برای ایجاد مجموعه ای از دارایی ها مانند کد و فایل استفاده می شود. این روی سرور یا مرورگر اجرا نمی شود. Webpack تمام فایل‌های جاوا اسکریپت و سایر دارایی‌ها را در حالی که آنها را در یک فایل بزرگ تبدیل می‌کند، می‌گیرد، و از این رو بسته به سبک رندر تنظیم شده برای وب‌سایت، این فایل را می‌توان به سرور یا مرورگر ارسال کرد.

به طور معمول، Webpack ReactJS با فایلی با برچسب webpack.config.js پیکربندی می شود زیرا در اینجا تمام تنظیمات مورد نیاز نوشته شده است.

مرحله 1: NodeJS، VSCode را نصب کنید (هر ویرایشگری که از فایل Webpack پشتیبانی می کند، به احتمال زیاد از کد اسکریپت پشتیبانی می کند).

گام 2: Command Prompt را باز کنید و با دستور زیر یک دایرکتوری یا یک پوشه ایجاد کنید.

کد:

mkdir <directory/ file name>

همانطور که نشان داده شده است یک دایرکتوری در داخل C: Drive ایجاد می کند.

فرمان:

cd <directory/ file name>

فایل مورد نیاز برای انجام عملیات بیشتر باز می شود.

Webpack for React - Directory

مرحله 3: سپس، باید npm را با دستور زیر مقداردهی اولیه کنید.

فرمان:

npm init -y

خروجی:

npm را مقداردهی اولیه کنید

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

مرحله 4: اکنون باید وابستگی ها را با دستور زیر اضافه کنید. افزودن وابستگی‌ها به کد به نیازهای کاربر یا نیازهای عملکرد بستگی دارد.

دستور نصب وابستگی ها:

npm i <dependency_name>

خروجی:

Webpack برای React - وابستگی ها

به طور مشابه، چند وابستگی دیگر اضافه کنید.

ebpack برای React - وابستگی‌ها 2

بنابراین اکنون اجازه دهید بسته.json را برای وابستگی ها بررسی کنیم، در اینجا اسکرین شات ویرایشگر کد ویژوال استودیو را نشان می دهد. تمام وابستگی های نصب شده و وابستگی های مرتبط به صورت زیر نوشته شده اند.

package.json برای وابستگی ها

مرحله 5: اکنون باید فایل Babel RC را برای پیکربندی Babel تنظیم کنید. مطابق شکل زیر بر روی Add File کلیک کنید و نام آن را babelrc. کنید و اسکریپت را در آن وارد کنید.

افزودن فایل

این به این معنی است که به بابل بگویید از افزونه ها یا وابستگی های نصب شده استفاده کند. در مرحله بعد، زمانی که کاربر babel-loader را از Webpack React فراخوانی می کند، برنامه می داند که کجا به دنبال وابستگی ها باشد.

مرحله 6: حالا فایل webpack.config.js را ایجاد کنید و اسکریپت زیر را بنویسید.

Webpack for React - Script

شماره پورت می تواند بر اساس در دسترس بودن متفاوت باشد. این اسکریپت پوسته اولیه برای وب پک است. در اینجا در خط شماره 7، «حالت» پیکربندی بسته وب را در «توسعه» یا «تولید» تعریف می‌کند.

حالت توسعه برای تجربه و سرعت توسعه دهنده بهینه شده است در حالی که حالت تولید پیش فرض هایی را ارائه می دهد که در استقرار برنامه مفید هستند.

مرحله 7: برای اجرای این پک وب، باید یک نقطه ورود ارائه کنیم، جایی که فرآیند بسته‌بندی برنامه‌های React از آنجا شروع می‌شود.

نسخه های مختلفی از Webpack وجود دارد، در Webpack 4، اگر یک نقطه ورودی گنجانده نشده باشد، نقطه ورودی را در دایرکتوری ./src در نظر می گیرد.

خروجی و نام فایل نیز می‌تواند فهرست شود زیرا به وب‌پک می‌گوید فایل‌های کامپایل‌شده را کجا بنویسد و نام فایل با هش‌ای که توسط وب‌پک تولید می‌شود، هر چند وقت یک‌بار جایگزین می‌شود و برنامه تغییر می‌کند و دوباره کامپایل می‌شود.

همچنین، devtool نقشه های منبع را ایجاد می کند که به اشکال زدایی برنامه کمک می کند. اگرچه انواع مختلفی از نقشه‌های منبع وجود دارد، نقشه منبع درون خطی باید فقط برای حالت توسعه استفاده شود.

مرحله 8: همچنین ماژول از نوع ماژول هایی است که اپلیکیشن شامل ماژول Babel و CSS می باشد. و قوانین در مورد نحوه مدیریت هر ماژول توسط کاربر قابل اجرا هستند.

مرحله 9: ما دو قانون داریم، قانون اول آزمایش فایل‌ها با پسوند js با استفاده از Babel از طریق babel loader است که به جستجوی فایل‌های جاوا اسکریپت کمک می‌کند.

مرحله 10: و قانون بعدی تست فایل های CSS با پسوند css. برای مدیریت فایل های css می توان از دو لودر استفاده کرد، css-loader و style-loader. کاربر به لودر css دستور می دهد که از ماژول CSS، با پوشش شتر و ایجاد نقشه های منبع استفاده کند.

مرحله 11: ما همچنین از افزونه html webpack استفاده می کنیم که اشیاء را با گزینه های مختلف می پذیرد. در اینجا اجازه دهید افزونه HTML مورد استفاده و وابستگی های دیگر را برای تجزیه و تحلیل باندلر مشخص کنیم.

مرحله 12: و سپس با تعیین localhost و پورت سرور توسعه را پیکربندی کنید. اگر می خواهید برنامه را به طور خودکار راه اندازی کنید، باید historyApiFallback را به عنوان true و باز کردن را به عنوان true تنظیم کنید.

در زیر اسکریپت کامل روی اسکرین شات مرحله 7 آمده است، به این صورت فایل webpack در ReactJS ایجاد می شود.

نمونه اسکریپت فایل Webpack.config.js:

کد:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3002;
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.[hash].js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localsConvention: 'camelCase',
sourceMap: true
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
favicon: 'public/favicon.ico'
})
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true
}
};

وب پک برای React Idea

برای درک خوب Webpack برای React، ایده اصلی این است که در مورد Gulp و Grunt صحبت کنید. ورودی‌های Gulp و Grunt مسیرهای فایل هستند و فایل‌های تطبیق را می‌توان از طریق یک فرآیند متفاوت اجرا کرد. هم Gulp و هم Grunt هیچ‌کدام از آنها ساختار پروژه را نمی‌دانند و اگر این با Webpack برای React مقایسه شود، Grunt و Gulp می‌دانند که چگونه فایل‌ها را مدیریت کنند و Webpack درک می‌کند که پروژه‌ها را مدیریت کند.

یک بسته وب برای React داشته باشید، کاربر یک نقطه ورود به عنوان مثال، index، js یا main.js می دهد. از این رو webpack برای React سعی می کند برنامه را بررسی کند و ببیند که چگونه وب پک از طریق نیاز، واردات یا با مقادیر url در css و غیره متصل می شود. یک نمودار وابستگی کامل برای همه دارایی های مورد نیاز برنامه ایجاد می شود و همه به یک فایل واحد اشاره می کنند. .

Asset یک فایل است، یعنی css، json، jsx،، تصویر، js و غیره یک گره یک گراف وابستگی است که توسط وب پک برای React ایجاد می شود. هر زمان که یک گره جدید پیدا شود، وب پک پسوند فایل را بررسی می کند و اگر پسوند با پیکربندی کاربر مطابقت داشته باشد، فرآیند اجرا می شود و به آن لودر می گویند. Babel همانی است که با استفاده از دستور زیر نصب می شود و می توان آن را نصب کرد.

کد:

npm install babel-loader

سوالات متداول

سوالات متداول ذکر شده در زیر آورده شده است:

Q1. Webpack برای React نمودار وابستگی را ارائه می دهد. چه مفهومی داره؟

پاسخ: یک فایل به دیگری وابسته است، webpack for react به عنوان وابستگی رفتار می کند که به وب پک اجازه می دهد دارایی های غیر کد مانند، تصاویر و فونت های وب را بگیرد.

از require() روی «دارایی‌های استاتیک» در محلی استفاده می‌کند.

<img src={ require('../../assets/emp_logo.jpg') } />

در حالی که در حال پردازش برنامه است، با لیستی از ماژول های تعریف شده در خط فرمان یا خط پیکربندی شروع می شود، و از این رو با شروع از نقاط ورودی، webpack for react یک نمودار وابستگی به صورت بازگشتی ایجاد می کند که شامل هر ماژول می شود و سپس همه ماژول ها را در بسته بندی می کند. بسته های کوچکتر به عنوان بسته ای که توسط مرورگر بارگیری می شود.

Q2. چند افزونه مفید را در اینجا فهرست کنید.

پاسخ: همانطور که لیست ادامه دارد، در اینجا ما چند افزونه مفید را لیست می کنیم.

  • تعریف پلاگین: این به کاربر اجازه می دهد تا ثابت های جهانی ایجاد کند که در زمان کامپایل پیکربندی شده اند.
  • CommonsChunkPlugin: این یک فایل جداگانه ایجاد می کند که متشکل از ماژول های مشترک است که بین چندین نقطه ورودی به اشتراک گذاشته می شود.
  • HtmlWebpack Plugin: ایجاد فایل‌های HTML را برای ارائه پک وب برای بسته‌های React ساده می‌کند.
  • CompressionWebpackPlugin: نسخه فشرده دارایی ها را برای ارائه کدگذاری محتوا آماده می کند
  • ExtractTextWebpackPlugin: متن را از بسته ها یا بسته ها در یک فایل جداگانه استخراج می کند.

نتیجه

با این اجازه دهید موضوع “Webpack for React” را به پایان برسانیم. ما به این موضوع پرداخته‌ایم که وب‌پک برای React به چه معناست و چگونه ایجاد می‌شود و چگونه راه‌اندازی به صورت مرحله‌ای انجام می‌شود. ما همچنین نحوه استفاده از بسته وب را برای ایده‌شناسی واکنش دیده‌ایم.

مقالات پیشنهادی

این راهنمای Webpack برای React است. در اینجا به مقدمه می پردازیم، چرا از webpack برای react استفاده می کنیم؟ چگونه وب پک را برای واکنش ایجاد و راه اندازی کنیم؟ همچنین می توانید برای کسب اطلاعات بیشتر به مقالات زیر نگاهی بیندازید –

  1. Webpack ReactJS
  2. React Render
  3. React Native Swiper
  4. واکنش نشان دهید اگر

پست Webpack برای React اولین بار در تگ سرویس ظاهر شد.


به این مطلب امتیاز دهید

جهت ارسال نظر اینجا کلیک کنید.