نصب یک پروژه ES6 با استفاده از Babel

در این آموزش چگونگی راه اندازی یک پروژه ES6 با استفاده از Babel برای تبدیل کد ES6 به کد ES5 که برای مرورگرهایی با ورژن های قدیمی قابل فهم باشد را یاد خواهید گرفت.

مروری بر Transpiler جاوا اسکریپت

تمام مرورگرها همه ویژگی های ES6 را پشتیبانی نمی کنند. بنابراین اگر بخواهید از یک ویژگی جدید در ES6 استفاده کنید و انتظار داشته باشید برای مرورگرهای قدیمی قابل فهم باشد، باید از یک transpiler استفاده کنید.

یک transpiler آخرین کدهای جاوا اسکریپت را به یک ورژن قدیمی تبدیل می کند تا برای مرورگر قدیمی قابل فهم باشد.

چندین transpiler اصلی مثل Traceur و Babel وجود دارد. در این آموزش به شما نشان می دهیم که چطور از Bsbel استفاده کنید.

برای درک سریع روش کار Babel می توانید بصورت انلاین امتحان کنید. به عنوان مثال کد زیر که در ES6 نوشته شده را وارد می کنید:

let nums = [1,2,3];
let doubleNums = nums.map((e) => e*2);

Babel کد را به کد ES5 زیر تبدیل می کند:

"use strict";
 
var nums = [1, 2, 3];
var doubleNums = nums.map(function (e) {
  return e * 2;
});

راه اندازی Babel

نصب node.js

ابتدا باید آخرین ورژن node.js را با دانلود آن از وبسایت nodejs.org نصب کنید.

نصب node.js آسان است. فقط لازم است دستورالعمل را قدم به قدم دنبال کنید. وقتی node.js را با موفقیت نصب کردید می توانید آن را با صدور فرمان زیر تایید کنید:

> node -v
v7.2.0

در زمان ‌نوشتن این مقاله، ورژن node.js، ۷.۲.۰ بوده است.

ساخت پوشه پروژه و فایل package.json

ابتدا، فایلی برای ذخیره فایل های پروژه e.g., d:\projects\es6-demo ایجاد کنید.

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

> npm init

فرمان از شما اطلاعات پایه ای را می خواهد. بصورت زیر اطلاعات را وارد کنید:

name: (es6-demo) es6
version: (1.0.0) 1.0.0
description: ES6 demo
entry point: (index.js)
test command:
git repository:
keywords: es6
author: jstut
license: (ISC)
About to write to D:\projects\es6-demo\package.json:
 
{
  "name": "es6",
  "version": "1.0.0",
  "description": "ES6 demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "es6"
  ],
  "author": "jstut",
  "license": "ISC"
}

پوشه d:\projects\es6-demo\ را بررسی کنید، فایل های جدیدی را خواهید دید که با نام package.json  ایجاد شده.

نصب ابزار Babel CLI

برای نصب ابزار Babel CLI از دستور زیر استفاده کنید:

> npm install --save-dev babel-cli

این کار باعث نصب ابزار Babel CLI در محل فولدر پروژه شما خواهد شد.

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

"devDependencies": {
    "babel-cli": "^6.18.0"
 }

توجه داشته باشید که ورژن شما ممکن است جدیدتر باشد.

راه اندازی پوشه ها برای کدهای جاوااسکریپت

برای ساماندهی فایل های جاوا اسکریپت، دو پوشه جدید src و dist ایجاد کنید. پوشه src حاوی کد جاوا اسکریپت در آخرین ورژن آن است. Babel CLI کد را از پوشه src می گیرد، آن را به ورژن قدیمی تر تبدیل می کند و  فایل های کد را در پوشه dist ذخیره می کند.

به جای اجرای Babel مستقیما از خط فرمان، می توانید فرمان ها را در scripts  از بخش package.json مانند زیر قرار دهید:

"scripts": {
    "build": "babel src -d dist"
}

حالا، می توانید یک فایل جاوااسکریپت با نام app.js در پوشه src ایجاد کنید:

var nums = [1,2,3];
var doubleNums = nums.map((e) => e * 2);

و فرمان زیر را در خط فرمان صادر کنید:

> npm run build

خروجی زیر را مشاهده خواهید کرد:

> es6@1.0.0 build D:\projects\es6-demo
> babel src -d dist
 
src\app.js -> dist\app.js

حالا، پوشه dist را بررسی کنید، خواهید دید که فایل app.js ایجاد شده. اما، محتوای فایل app.js  در پوشه dist  مشابه با محتوای پوشه src  است.

برای جابجا کردن کد جاوااسکریپت، باید دستور آن را به Babel بدهید.

موقعیت و پیکربندی Babel

برای فعال کردن تغییر در جاوااسکریپت با استفاده از Babel، نیاز به نصب آخرین تنظیمات از پیش تعیین شده دارید:

> npm install babel-preset-latest --save-dev

برای استفاده از تنظیمات از پیش تعیین شده، یک فایل جدید با نام .babelrc در پوشه پروژه های d:\projects\es6-demo\ با محتوای زیر ایجاد کنید:

{
  "presets": ["latest"]
}

حالا می توانید فرمان ساخته شده را دوباره اجرا کنید:

> npm run build

و app.js  را در پوشه dist بررسی کنید:

"use strict";
 
var nums = [1, 2, 3];
var doubleNums = nums.map(function (e) {
  return e * 2;
});

همانطور که دیدید Babel ورژن ES6 جاوا اسکریپت را به ورژن ES5 تبدیل می کند.

در این آموزش یاد گرفتید که چطور Babel را به عنوان transpiler جاوااسکریپت راه اندازی کنید تا آخرین ورژن جاوااسکریپت را به ورژن قدیمی تر تبدیل کند تا برای ورژن قدیمی تر مرورگر قابل فهم باشد.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 3٫67 out of 5)
Loading...

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit