ฮาวทู (How To) Node.js ให้รองรับ ES6 กันเต๊อะ

ES6 ย่อมาจาก ECMAScript…. >>> [Skip Now]

เห้ยยย ES6 อยากเขียนอ่ะ แต่ Node.js version ที่ใช้ . ยังไม่รองรับทำไงดี

Let’s start

• สำหรับ Node.js สามารถเช็คได้ว่า Syntax ES6ใหนลองรับแล้วบ้างจาก http://node.green/

หลักการ

เวลาเราเขียน code เราก็เขียน ES6 ได้เลยแต่เวลาเรานำมันไปใช้งานเราจะแปลงร่างมันเป็น ES5 ที่ Node.js,และ Browser รองรับ นั่นเอง ขั้นตอนนี้เราเรียกมันว่า Transpiler

ตัวอย่าง

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code_lz=GYVwdgxgLglg9mABAQwBQEoDeAoRiBOAplCPkgAr5wC2MAzoQHRF0A2cAboagESEz8e6ANzYAvtmR0AnpEShIsBIiiE6UDDjytiiAB6IAvCgDuyGFBQZReIiTL7RYoA

ด้านซ้าย รูปแบบ Javascript คือ ES6 ถูกแปลงร่างมาเป็น ES5 ในทางด้านขวา (Transpiler)

โดยพระเอกของเรา ที่เรานำเสนอคือ https://babeljs.io/

มาเริ่มที่ Node.js ฝั่ง server กันก่อน

ผมจะแนะนำวิธีง่ายสุดๆ โดยใช้ . babel-register

*ปล. ยังมีวิธีอื่นอีกแต่ผมจะขอข้ามไปนะครับ

สิ่งที่ต้องเตรียม

• ติดตั้ง package : npm i babel-register -D
• ติดตั้ง package : npm i babel-preset-env -D
• ติดตั้ง package : npm i express -S ในได้ตัวอย่างได้จำลองการสร้าง web-server ขึ้นมาด้วย express

ขั้นตอนที่ 1

สร้างโปรเจ็คของเราขึ้นมาก่อนด้วย npm init (อ่านว่า อิน — อิต) แล้วติดตั้ง package ตาม สิ่งที่ต้องเตรียม ด้านบน แล้วเราจะได้ไฟล์ package.json มาเเบบนี้

ไฟล์ package.json

{
    "name": "setup_babel",
    "version": "1.0.0",
    "description": "setup_babel",
    "main": "index.js",
    "scripts": {
       "start": "node server.js"
    },
        "author": "",
        "license": "ISC",
        "dependencies": {
        "express": "^4.15.3"
    },
    "devDependencies": {
        "babel-register": "^6.24.1",
        "babel-preset-env": "^1.5.2"
    }
}

ขั้นตอนที่ 2

สร้างไฟล์ .babelrc เพื่อเป็นการตั้งค่า babel ว่าใช้ การแปลง code (Transpiler) แบบใหน

{
     "presets": ["env"]
}

ขั้นตอนที่ 3

สร้างไฟล์ app.js โดยในนี้เราจะเขียน code แบบ ES6 กัน จะเขียน ES5 ผสมไปก็ไม่มีปัญหาครับ

import express from 'express';
import http from 'http';
const app = express();
const PORT = "3000";
http.createServer(app).listen(3000, () => {
     console.log("server status : running");
     console.log(`run on port : ${PORT}`);
});
app.use("*", (req, res) => {
     console.log("enter route");
     let text = "Hi <a href='https://medium.com/bakatest-          me'>https://medium.com/bakatest-me</a>";
     return res.send(text);
})

ขั้นตอนที่ 4

สร้างไฟล์ server.js

require('babel-register');
require('./app.js');

โดย directory ของเราจะมีโครงสร้างหน้าตาแบบนี้

เสร็จแล้วก็ สั่ง เปิด CLI หรือ Terminal เข้าที่ directory project และ พิมพ์คำสั่ง node server.js

ตัวอย่าง code https://github.com/bakatest-me/setup-babel/tree/master/node.js