در این مقاله، خواهید آموخت که با در نظر گرفتن تمام جنبه‌های مدرن و فرانت اند زبان برنامه نویسی JavaScript ، به ساده‌ترین حالت ممکن یک اپلیکیشن بنویسید.
Inline JavaScript
گام اول- ما باید بخشی از نمونه اولیه HTML-only خود را با JavaScript انجام دهیم. ساده‌ترین راه برای انجام این کار استفاده از Inline JavaScript است. بنابراین index.html ما می‌شود:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Hello World!</title>
</head>
<body>
<script type=”text/javascript”>
const element = document.createElement(“h1”);
element.innerText = “Hello World!”;
document.body.appendChild(element);
</script>
</body>
</html>
اگر به آن‌چه که در این جا رخ داد و نحوه تولید همان صفحه قبلی علاقه دارید، می‌توانید در اینجا اطلاعات بیشتری در مورد manipulation در DOM به دست بیاورید.
بارگذاری فایل JS
داشتن همه کدها در فایل index.html مقیاس‌بندی نشده و خیلی سریع به اسباب زحمت تبدیل می‌شود. در عوض بیایید کد خود را به فایل‌های HTML و JS جداگانه تقسیم‌بندی کنیم:
script.js:
const element = document.createElement("h1"); element.innerText = "Hello World!"; document.body.appendChild(element);و index.html آپدیت شده:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Hello World!</title> </head> <body> <script type="text/javascript" src="./script.js"></script> </body></html>این خیلی بهتر است!
ماژول JavaScript
در مرحله قبل، JavaScript را به روش سنتی – یک فایل در یک زمان – اضافه کردیم. JS مدرن به ما این امکان را می‌دهد که کد خود را در ماژول‌هایی بنویسیم که وابستگی‌های آن‌ها را با مرورگرهایی که path ها را حل می‌کنند و فایل‌های لازم را بارگذاری می‌کنند، در داخل تعریف می‌کنند. در حال حاضر، این ویژگی در حدود 95% از مرورگرها موجود است.
بیایید از این در اپلیکیشن خود استفاده کنیم!
ابتدا یک message را به یک فایل جداگانه به نام greeting.js منتقل می‌کنیم:
export const greetingMessage = "Hello World!";توجه داشته باشید که ما قبل از const greetingMessage از export استفاده می‌کنیم. این به JS اجازه می‌دهد تا بدانید که این ثابت باید برای import از فایل‌های دیگر در دسترس باشد.
اکنون می‌توانیم به راحتی این مقدار را در هر جایی از پروژه خود که نیاز داریم، وارد کنیم. ما همین کار را برای script.js آپدیت‌شده انجام خواهیم داد:
import { greetingMessage } from "./greeting.js"; const element = document.createElement("h1"); element.innerText = greetingMessage; document.body.appendChild(element);حداقل آپدیت ضروری، تغییر ویژگی type در ورودی (import) index.html است:
<title>Hello World!</title> </head> <body>- <script type="text/javascript" src="./script.js"></script>+ <script type="module" src="./script.js"></script> </body> </html>تبدیل به یک پکیج npm
Npm یک package manager است که به ما امکان می‌دهد به راحتی پکیج‌های community را برای استفاده در برنامه خود دانلود کنیم. این برای Node ، سمت سرور JavaScript شروع شد. اما از چند سال پیش، به استانداردی برای سمت فرانت اند JavaScript نیز تبدیل شده است. این برای ما، پیکربندی آسان ساخت script و ساخت وابستگی‌ها را امکان‌پذیر می‌کند.
برای مقداردهی اولیه پکیج، می‌توانید npm init را در فولدر پکیج خود اجرا کنید:
$ npm initThis utility will walk you through creating a `package.json` file.It covers only the most common items, and it tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit.package name: (hello-world)version: (1.0.0)…
npm پیش‌فرض‌های معقولی را ارائه می‌کند، بنابراین در اکثر موارد باید مقدار پیشنهادی را انتخاب کنید. پس از اجرای موفقیت آمیز این دستور، package.json در فولدر شما ایجاد می‌شود.
Webpack
استفاده از ماژول‌های بومی ES در اکثر مرورگرها کار می‌کند. اما در پروژه‌های دنیای واقعی، شما همچنان می‌بینید که JS به عنوان بخشی از فرآیند ساخت با آن همراه است. چرا؟ کارهای زیادی وجود دارد که معمولاً می‌خواهید در پروژه انجام دهید:
- TypeScript یا هر زبان دیگری که به JavaScript کامپایل می‌شود را کامپایل کنید.
- کاهش تعداد فایل‌های ارسالی به کاربران
- و در عین حال، داشتن کنترل مناسب بر اندازه تکه‌هایی که کد خود را به آن‌ها تقسیم می‌کنیم.
- این شامل برخی از تکنیک‌های cache busting (مانند افزودن cache فایل به نام آن) است.
محبوب‌ترین JS bundler برای JavaScript ، Webpack است. بیایید آن را به پروژه خود اضافه کنیم! ابتدا باید آن را نصب کنیم:
$ npm install webpack --save-dev added 77 packages, and audited 78 packages in 7s 9 packages are looking for funding run `npm fund` for details found 0 vulnerabilitiesدر صورت موفقیت آمیز بودن، این دستور فایل‌های webpack را دانلود کرده و به وابستگی‌های توسعه در package.json اضافه می‌کند.
Git ignore
اگر از git استفاده می‌کنید (همانطور که باید استفاده کنید) این مقدار را روی gitingore. تنظیم کنید:
node_modulesdistاین هر دو فولدر را خارج از مخزن قرار می دهد:
node_modeles — جایی که تمام وابستگی‌های شخص ثالث در آن ذخیره می‌شود. معمولاً بزرگ است و می‌تواند مختص سیستم عامل باشد و هر محیط باید پکیج‌ها را مستقیماً از مخزن npm دریافت کند.
Dist — دائماً آپدیت می‌شود و هر زمان که نیاز باشد، می‌توان آن را از source code بازیابی کرد.
build
برای شروع استفاده از webpack در همان فایل package.json ، build را به بخش اسکریپت‌های خود اضافه می‌کنیم:
{ … "scripts": { "build": "webpack --mode production", … },تولید mode—به صراحت روشی که Webpack باید بر اساس آن کد بسازد را تعیین می‌کند. بنابراین ما می‌توانیم از دیدن هشدارهای زیر در کنسول جلوگیری کنیم:
WARNING in configurationThe 'mode' option has not been set, webpack will fall back to 'production' for this value.Set 'mode' option to 'development' or 'production' to enable defaults for each environment.You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/Build را با npm run build اجرا می‌کنیم. اولین اجرا چند وابستگی اضافی را نصب می‌کند:
$ npm run build > hello-world@1.0.0 build> webpack CLI for webpack must be installed. webpack-cli (https://github.com/webpack/webpack-cli) We will use "npm" to install the CLI via "npm install -D webpack-cli".Do you want to install 'webpack-cli' (yes/no): yesاولین build شکست خواهد خورد، زیرا پیکربندی پیش‌فرض webpack به دنبال کد در فولدر src/. می‌گردد. ما می‌توانیم آن را با این روش برطرف کنیم:
- تغییر نام script.js به index.js
- انتقال index.js و greeting.js به فولدر جدید src/.
برای استفاده از کد ساخته شده خود، بیایید index.html را با تغییر زیر آپدیت کنیم:
<title>Hello World!</title> </head> <body>- <script type="module" src="./script.js"></script>+ <script src="./dist/main.js"></script> </body> </html>می‌توانید کد من در این مرحله را اینجا پیدا کنید.
ایجاد index.html
برخی از JS bundler ها از فایل‌های index به عنوان پیکربندی برای تعیین این که چه فایل‌هایی باید ساخته شوند، استفاده می‌کنند. در Webpack ، معمولاً برعکس است: فایل پیکربندی مسئول تعیین نحوه تولید فایل index است. در ابتدا ممکن است کمی گیج‌کننده باشد، اما زمانی که در مرحله بعدی سرور توسعه می‌رسیم، به خوبی کار می‌کند. پس بیایید آن را در اینجا تنظیم کنیم!
افزودن webpack.config.js
ابتدا فایل پیکربندی webpack.config.js را اضافه می‌کنیم:
module.exports = { mode: "production",};این تغییر به ما امکان می‌دهد اسکریپت build را در package.json ساده‌سازی کنیم:
"scripts": {- "build": "webpack --mode production",+ "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" },به این دلیل که mode قبلاً در پیکربندی تنظیم شده است، در این مرحله build باید مانند قبل عمل کند.
اضافه کردن html-webpack-plugin
در مرحله بعد، باید یک وابستگی توسعه دیگر اضافه کنیم:
$ npm install --save-dev html-webpack-pluginبرای استفاده از آن، باید webpack.config.js را به روز رسانی کنیم:
const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "production", plugins: [new HtmlWebpackPlugin({ title: "Hello World!" })],};حالا index.html قدیمی را حذف کنید.
Build نهایی دو فایل تولید می‌کند:
$ npm run build > hello-world@1.0.0 build> webpack asset index.html 215 bytes [emitted]asset main.js 116 bytes [compared for emit] [minimized] (name: main)orphan modules 47 bytes [orphan] 1 module./src/index.js + 1 modules 218 bytes [built] [code generated]webpack 5.74.0 compiled successfully in 157 msو خروجی آن را می‌توان در فولدر dist پیدا کرد:
$ ls distindex.html main.jsبرای مقایسه به این کد نگاه کنید.
سرور توسعه (Development server)
برای کمک به توسعه، Webpack یک سرور توسعه ارائه می‌دهد.
چرا باید زحمت بکشیم؟ چون سرور توسعه کارهای زیر را انجام می‌دهد:
- مراقب تغییر فایل‌ها است.
- هر بار که چیزی تغییر می‌کند آن را بازسازی می‌کند.
- اپلیکیشن را دوباره در مرورگر شما بارگیری می‌کند.
- هر بار که تغییری در کد ایجاد می‌کنید، به راحتی و در چند ثانیه آن را ذخیره می‌کند. که این می‌تواند صدها بار در طول روز کاری شما اتفاق بیفتد.
پیکربندی آن آسان است. فقط لازم است اسکریپت start را به package.json اضافه کنید:
"main": "src/index.js", "scripts": { "build": "webpack",+ "start": "webpack serve", "test": "echo \"Error: no test specified\" && exit 1" },اولین باری که این دستور را اجرا می‌کنید، Webpack پیشنهاد می‌کند که وابستگی‌های لازم webpack-dev-server را نصب کنید.
$ npm run start > hello-world@1.0.0 start> webpack serve [webpack-cli] For using the 'serve' command you need to install: 'webpack-dev-server' package.[webpack-cli] Would you like to install the 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n) Yبیایید آن را در عمل ببینیم:
$ npm run start > hello-world@1.0.0 start> webpack serve <i> [webpack-dev-server] Project is running at:<i> [webpack-dev-server] Loopback: http://localhost:8080/…هنگامی که آن را در دستگاه خود راه اندازی می‌کنید، می‌توانید از URL بازدید کرده و بررسی کنید که آیا در واقع با تغییراتی که در فایل‌های خود ذخیره می‌کنید، دوباره بارگیری می‌شوند یا خیر.
کد مرجع را بررسی کنید.
منبع: hackernoon نویسنده: مارسین ووسینک
Leave feedback about this