BabelJS - Thiết lập dự án bằng Babel 7

Phiên bản mới nhất của Babel, 7 được phát hành với những thay đổi đối với các gói hiện có. Phần cài đặt vẫn giống như đối với Babel 6. Điểm khác biệt duy nhất ở Babel 7 là tất cả các gói cần được cài đặt với@babel/, ví dụ: @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill, v.v.

Đây là một thiết lập dự án được tạo bằng babel 7.

Chỉ huy

Thực hiện lệnh sau để bắt đầu thiết lập dự án -

npm init

Cài đặt các gói sau

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

Đây là package.json được tạo -

Bây giờ sẽ tạo ra một .babelrc tệp trong thư mục gốc -

Tạo một thư mục src/ và thêm tệp main.js vào nó và viết mã của bạn để chuyển mã sang es5.

src / main.js

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

lệnh chuyển tải

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

main_es5.js

"use strict";

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

Hoạt động của Babel 7 vẫn giống như Babel 6. Sự khác biệt duy nhất là cài đặt pacakge với @babel.

Có một số cài đặt trước không được chấp nhận trong babel 7. Danh sách như sau:

• Cài đặt trước ES20xx
• babel-preset-env
• babel-preset-latest
• Cài đặt trước giai đoạn trong Babel

Ngoài ra, năm từ các gói được xóa - @babel/plugin-transform-es2015-classes Hiện tại là @babel/plugin-transform-classes

Chúng ta sẽ thấy thêm một ví dụ về cách làm việc với bảng chữ cái và chuyển nó sang JavaScript Es2015 bằng cách sử dụng cài đặt trước bản ghi và babel 7.

Để làm việc với typecript, chúng ta cần cài đặt gói typecript như sau:

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

Tạo nên test.ts tập tin trong src/ thư mục và viết mã ở dạng bảng chữ -

test.ts

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

getName("Siya");

.babelrc

chỉ huy

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

test.js

"use strict";

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

getName("Siya");