قطعا به عنوان برنامه نویس JavaScript کم و بیش با ecmaScript 6 آشنایی دارید.
فکر میکنم کدهای فوق احتیاج به توضیح بیشتری نداشته باشند. اکنون فرض کنید نام فایل آن code.js است و در پوشه‌ی src قرار دارد. همانطور که پیشتر عرض کردم، برای تبدیل آن به کدی از نوع es5 از gulp استفاده میکنیم.
بعد بر روی پوشه‌ی root پروژه‌تان رفته و با استفاده از خط فرمان، npm init را ارسال کنید تا package.json برای شما ساخته شود.
با استفاده از این فرمان، gulp را در مسیر جاری پروژه‌تان و در پوشه‌ی node-modules نصب کرده و همچنین فرمان --save-dev نیز آن را به وابستگی‌های پروژه اضافه میکند.
حال در مسیر اصلی پروژه، فایل gulpfile.js را ساخته و کدهای زیر را مینویسیم:
برای توضیح کدهای بالا باید عرض کنم در قسمت gulp.task، عملیاتی را که لازم میدانیم gulp برای ما انجام دهد، شرح میدهیم.
به صورت مستقیم میتوانیم هر فایلی را که به صورت استاندارد نوشته شده است، کامپایل کرده و تبدیل به es6 نماییم.
فرض کنید آن را با نام es5.js در مسیر اصلی پروژه ذخیره کرده‌ایم. با استفاده از خط فرمان خود آن را تبدیل به es6 خواهیم کرد؛ بدین شکل:
فایل مورد نظر ما به نام es6.js ذخیره خواهد شد و بدین صورت کامپایل خواهد شد
تبدیل es5 به es6 انجام شد؛ اما باید خدمتتان عرض کنم آنچنان هم نباید انتظار داشت که بعد از این تبدیل و فشار دادن دکمه‌ی F5، پروژه‌ی شما بدون هیچ خطایی اجرا شود (البته در صورتیکه هنوز در اوایل پروژه هستید شاید اینگونه شود) اما کمی refactoring برای کدهای کامپایل شده را به es 6، در خاطر داشته باشید.
با وجود ویژگی‌های منحصر به فردی که دارد شاید تنها دلیلی که برخی از برنامه نویسان هنوز تصمیم به عدم استفاده از این زبان را دارند، مرورگرهایی میباشند که هنوز از es6 پشتیبانی نمیکنند: es6 compatibility table
اما راهکاری مناسب، برای اینکه بتوان هم از es6 استفاده کرد و هم کاربران را مجبور به استفاده‌ی از مرورگرهای مدرن نکنیم نیز وجود دارد:به صورت مستقیم میتوان با استفاده از Babel، کدهای نوشته شده‌ی با es6 را کامپایل و تبدیل به es5 کنیم. برای اینکار معمولا از gulp استفاده میکنیم.
gulp در وبسایت رسمی آن، خودش را اینچنین تعریف کرده است : automate and enhance your workflow
حال کافیست با چند خط کد es6 شروع به کار کنیم. بنده معمولا از visual studio code استفاده میکنم.
class firstCLs
{
doFirst(str)
{
console.log(str);
}
}
class secondCls extends firstCLs
{
doSecond(str)
{
super.doFirst(str);
}
}
let str = 'string';
new secondCls().doSecond(`this is some ${str}`); ابتدا از طریق خط فرمان، خود gulp را نصب میکنیم.
npm install -g gulp
برای نصب gulp در پروژه‌ی local خود نیز این فرمان را ارسال کنید:
npm install gulp --save-dev
حال احتیاج به نصب gulp-babel داریم که با استفاده از خط فرمان، خود آن را نصب مینماییم:
npm install --save-dev gulp-babel babel-preset-es2015
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () => {
return gulp.src('src/code.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
}); gulp.src مسیر فایلی را که تصمیم داریم کامپایل شده و به es5 تبدیل شود، معین میکند ( لازم به ذکر است که میتوان بطور مثال همه‌ی اسکریپت‌های درون یک پوشه را انتخاب کرد که توضیح آن در این مقاله نمیگنجد).
بعد در قسمت اولین pipe فوق است که میخواهیم تبدیلی را به es2015 داشته باشیم و در آخرین pipe نیز با استفاده از متد dest، آدرس مسیری را که میخواهیم آن فایل کامپایل شده در آن قرار بگیرد، مینویسیم. بطور مثال من پوشه‌ی dist را به عنوان آدرس قرار داده‌ام.
مراحل انجام شده را save نمایید. خط فرمان خود را باز کرده و دستور gulp را type نمایید. بعد از پایان یافتن عملیات، به پوشه‌ی dist رجوع کنید. فایل مورد نظر مشاهد میشود.
اما حال فرض کنید پروژه ای در اختیار داشته و کد‌ها از نوع es5 میباشند و تصمیم به تبدیل آنها به es6 داشته باشید.
برای اینکار از lebab (که دقیقا عکس نوشتاری bable میباشد) استفاده میکنیم.
ابتدا از طریق خط فرمان خود آن را نصب مینماییم
npm install -g lebab
کدهای زیر را در نظر بگیرید
'use strict';
// Let/const
var name = 'Bob', time = 'yesterday';
time = 'today';
// Template string
console.log('Hello ' + name + ', how are you ' + time + '?');
var bob = {
// Object shorthand
name: name,
// Object method
sayMyName: function () {
console.log(this.name);
}
};
// Classes
var SkinnedMesh = function SkinnedMesh() {
};
SkinnedMesh.prototype.update = function (camera) {
camera = camera || createCamera();
this.camera = camera;
};
Object.defineProperty(SkinnedMesh.prototype, 'name', {
set: function (geometry) {
this.geometry = geometry;
},
get: function () {
return this.geometry;
}
});
// Commonjs
var lebab = require('lebab');
module.exports = SkinnedMesh;
// Arrow functions
var render = function () {
// ...
requestAnimationFrame(render);
}; lebab es5.js -o es6.js
const name = 'Bob';
let time = 'yesterday';
time = 'today';
// Template string
console.log(`Hello ${name}, how are you ${time}?`);
const bob = {
// Object shorthand
name,
// Object method
sayMyName() {
console.log(this.name);
}
};
class SkinnedMesh {
update(camera=createCamera()) {
this.camera = camera;
}
set name(geometry) {
this.geometry = geometry;
}
get name() {
return this.geometry;
}
}
import lebab from 'lebab';
export default SkinnedMesh;
// Arrow functions
const render = () => {
// ...
requestAnimationFrame(render);
}; 
) یا راست کلیک کردن بروی تب ظاهر میشود.
.png)
