Express & ES6 Boilerplate – انجمن DEV

بیایید یک برنامه Express.js را با استفاده از ES6 راه اندازی کنیم. من از کامپایلر Babel برای کامپایل کد ES6 خود به ES5 استفاده خواهم کرد. Babel یک کامپایلر جاوا اسکریپت است که امروزه امکان استفاده از نسل بعدی جاوا اسکریپت را فراهم می کند. این آموزش فرض می کند که Node Package Manager (NPM) و Node.js Engine را در محیط توسعه خود نصب کرده اید. اگر Node.js را نصب نکرده اید، می توانید آن را از وب سایت Node.js دانلود و نصب کنید. همچنین، اگر به این دیگ بخار es6 node-express علاقه مند هستید، می توانید کد بیس کامل را از اینجا دانلود کنید.

مرحله 1: پروژه را تنظیم کنید

1. یک دایرکتوری جدید برای پروژه خود ایجاد کنید و به آن بروید.
2. یک پروژه Node.js جدید را با اجرای دستور زیر در ترمینال خود راه اندازی کنید:

npm init -y

مرحله 2: وابستگی ها را نصب کنید

1. با اجرای دستور زیر Express و سایر بسته های مورد نیاز را نصب کنید:

npm install express

مرحله 3: بابل را پیکربندی کنید

1. با اجرای دستور زیر Babel و افزونه های لازم را نصب کنید:

npm install --save-dev @babel/core @babel/preset-env @babel/register

1. یک فایل با نام babelrc. در پوشه اصلی پروژه خود ایجاد کنید و محتوای زیر را اضافه کنید:

{
  "presets": ["@babel/preset-env"]
}

مرحله 4: برنامه Express را ایجاد کنید

1. فایلی به نام app.js در دایرکتوری اصلی پروژه خود ایجاد کنید.
2. کد زیر را به app.js اضافه کنید تا یک برنامه اصلی Express را راه اندازی کنید:

import express from 'express';

const app = express();

// Define routes and middleware here

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

در ترمینال خود، دستور زیر را برای راه اندازی سرور اجرا کنید:

node -r @babel/register app.js

مرحله 5: Nodemon را نصب کنید

1. با اجرای دستور زیر در دایرکتوری ریشه پروژه خود، nodemon را به عنوان یک وابستگی توسعه نصب کنید:

npm install --save-dev nodemon

1. فایل package.json پروژه خود را باز کنید و بخش “اسکریپت ها” را تغییر دهید تا یک اسکریپت جدید به نام “شروع” با دستور اجرای سرور با استفاده از nodemon ("start": "nodemon --exec babel-node app.js"). فایل package.json شما باید به شکل زیر باشد:

{
  "name": "express-amazon-cognito",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node app.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/node": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/register": "^7.21.0",
    "nodemon": "^2.0.22"
  }
}

1. تغییرات را در package.json ذخیره کنید.

2. ترمینال خود را باز کنید و به دایرکتوری ریشه پروژه خود بروید.

3. سرور را با استفاده از دستور زیر راه اندازی کنید:

npm start or yarn start

اکنون، nodemon به طور خودکار فایل های شما را برای تغییرات کنترل می کند و هر زمان که تغییرات را در کد خود ذخیره کنید، سرور را مجددا راه اندازی می کند.

مرحله 6: Prettier و ESLint را راه اندازی کنید

1. بسته های لازم را به عنوان وابستگی های توسعه دهنده نصب کنید:

npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier

1. با اجرای دستور زیر و دنبال کردن دستورات، یک فایل پیکربندی ESLint ایجاد کنید:

npx eslint --init

این دستور شما را در راه اندازی ESLint راهنمایی می کند. وقتی از شما خواسته شد انتخاب های زیر را انجام دهید:

- How would you like to configure ESLint? -> Use a popular style guide
- Which style guide do you want to follow? -> Airbnb
- Do you use TypeScript? -> No
- Where will your code run? -> Node
- How would you like to define a style for your project? -> Use a configuration file
- Which format do you want your config file to be in? -> JavaScript

1. افزونه Babel ESLint لازم را نصب کنید:

npm install --save-dev babel-eslint

1. فایل .eslintrc.js را که در دایرکتوری ریشه پروژه شما ایجاد شده است باز کنید. فایل پیکربندی را تغییر دهید تا افزونه: زیباتر/پیکربندی توصیه شده را گسترش دهید و گزینه تجزیه کننده را روی babel-eslint قرار دهید. باید چیزی شبیه این باشد (فایل منبع):

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': 'error',
  },
};

1. یک فایل .prettierrc در دایرکتوری ریشه پروژه خود ایجاد کنید و قوانین قالب بندی Prettier مورد نظر خود را مشخص کنید.

{
  "singleQuote": true,
  "trailingComma": "es5"
}

1. یک اسکریپت زیباتر را به بخش «اسکریپت‌ها» فایل package.json خود اضافه کنید:

"scripts": {
  "prettier": "prettier --write '**/*.{js,json}'"
}

اکنون می توانید ESLint و Prettier را روی پروژه خود اجرا کنید. به عنوان مثال، برای اجرای ESLint در کل پروژه خود، از دستور زیر استفاده کنید:

npx eslint .

برای فرمت کد خود با Prettier، دستور زیر را اجرا کنید:

npm run prettier

به راحتی می توانید تنظیمات ESLint و Prettier را برای برآورده کردن نیازهای پروژه خاص خود تنظیم کنید.

مرحله 7: env را تنظیم کنید

1. بسته dotenv را نصب کنید که به شما امکان می دهد متغیرهای محیطی را از یک فایل env. بارگیری کنید:

npm install dotenv

1. یک فایل .env در دایرکتوری ریشه پروژه خود ایجاد کنید. خط زیر را به فایل .env اضافه کنید و شماره پورت مورد نظر را مشخص کنید:

PORT=3000

1. در فایل ورودی اصلی خود (مانند app.js یا index.js)، بسته dotenv را با استفاده از نحو ES6 در بالای فایل وارد کنید:

import dotenv from 'dotenv';

1. با فراخوانی متد پیکربندی روی شی dotenv، متغیرهای محیط را از فایل .env بارگیری کنید:

dotenv.config();

1. کدی را که در آن پورت را برای سرور Express.js خود تعریف می کنید، به روز کنید. از destructuring برای استخراج متغیر PORT از process.env استفاده کنید:

const port = process.env.PORT || 3000;

در این مثال، متغیر PORT مقدار فایل .env را نگه می دارد. اگر تنظیم نشود، متغیر پورت به طور پیش فرض روی 3000 خواهد بود.

1. سرور Express.js خود را با استفاده از متغیر پورت راه اندازی کنید:

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

اکنون سرور Express.js شما شماره پورت را از فایل .env با استفاده از نحو ES6 می خواند.

شما می توانید کد و نحو را برای مطابقت با ساختار و الزامات پروژه خاص خود تنظیم کنید.
برای این مقاله می توانید پایگاه کد کامل را از اینجا دانلود کنید.