BabelJS - การตั้งค่าโครงการโดยใช้ Babel 7

Babel เวอร์ชันล่าสุด 7 ออกมาพร้อมกับการเปลี่ยนแปลงแพ็คเกจที่มีอยู่แล้ว ส่วนการติดตั้งยังคงเหมือนเดิมสำหรับ Babel 6 ข้อแตกต่างเพียงอย่างเดียวใน Babel 7 คือต้องติดตั้งแพ็คเกจทั้งหมดด้วย@babel/ตัวอย่างเช่น @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill เป็นต้น

นี่คือการตั้งค่าโปรเจ็กต์ที่สร้างโดยใช้ babel 7

คำสั่ง

ดำเนินการคำสั่งต่อไปนี้เพื่อเริ่มการตั้งค่าโครงการ -

npm init

ติดตั้งแพ็คเกจต่อไปนี้

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

นี่คือ package.json ที่สร้างขึ้น -

ตอนนี้จะสร้างไฟล์ .babelrc ไฟล์ในโฟลเดอร์รูท -

สร้างโฟลเดอร์ src/ และเพิ่มไฟล์ main.js ไปที่มันและเขียนโค้ดของคุณเพื่อโอนไปยัง es5

src / main.js

let add = (a,b) => {
   return a+b;
}

คำสั่งเพื่อถ่ายทอด

npx babel src/main.js --out-file main_es5.js

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

การทำงานของ Babel 7 ยังคงเหมือน Babel 6 ข้อแตกต่างเพียงอย่างเดียวคือการติดตั้ง pacakge กับ @babel

มีการตั้งค่าล่วงหน้าบางรายการที่เลิกใช้งานใน Babel 7 รายการมีดังนี้ -

ES20xx ที่ตั้งไว้ล่วงหน้า
babel-preset-env
babel-preset-latest
การตั้งค่าเวทีล่วงหน้าใน Babel

นอกจากนี้ปีจากแพ็คเกจจะถูกลบ - @babel/plugin-transform-es2015-classes ตอนนี้ @babel/plugin-transform-classes

เราจะเห็นอีกหนึ่งตัวอย่างของการทำงานกับ typescript และถ่ายทอดไปยัง Es2015 JavaScript โดยใช้ typescript preset และ babel 7

ในการทำงานกับ typescript เราจำเป็นต้องติดตั้งแพ็คเกจ typescript ดังนี้ -

npm install --save-dev @babel/preset-typescript

สร้าง test.ts ไฟล์ในไฟล์ src/ โฟลเดอร์และเขียนโค้ดในรูปแบบ typescript -

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

คำสั่ง

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");