const numbers = [ 5, 10, 15];
console.log(numbers.map(number => number + 5)); // [10, 15, 20]

var numbers = [ 5, 10, 15];
console.log(numbers.map(function (number) {
  return number + 5;
})); //

Sau đó bạn cần đặt code JavaScript được viết theo ES6 trong thẻ 

Cách 2: Cài đặt và sử dụng Babel bằng CLI

2.1. Để cài đặt Babel CLI trên toàn hệ thống:

 npm install --g babel-cli

Kiểm tra lại thiết lập :

babel --version

2.2. Để cài đặt Babel CLI trong phạm vi một dự án cụ thể:

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

Kiểm tra lại thiết lập :

./node_modules/.bin/babel --version

Khuyến nghị: Việc sử dụng Babel CLI trong phạm vi một dự án cụ thể được khuyên dùng do các dự án khác nhau có thể sử dụng các phiên bản Babel CLI khác nhau và sẽ hạn chế rủi ro đụng phiên bản nếu như bạn chạy nhiều dự án cùng lúc trên cùng một máy.

Vì npm bây giờ đi kèm với npx, các gói CLI được cài đặt cục bộ có thể chạy bằng cách gõ lệnh vào thư mục dự án.

Do đó, chúng tôi hoàn toàn có thể chạy Babel chỉ bằng lệnh :

npx babel script.js

Lưu ý: Trường hợp Babel CLI được cài cùng lúc trên toàn hệ thống lẫn trong phạm vi của dự án thì khi cần sử dụng công cụ này ở dự án cụ thể thì bạn cần tham chiếu tới địa chỉ của tập tin ./node_modules/.bin/babel.

Babel Plugin

Sau khi cài đặt Babel CLI thì để thực hiện các tác vụ nhất định chúng ta sẽ cần thêm các plugin. Mỗi plugin khác nhau sẽ thực hiện các tác vụ khác nhau. Bạn có thể vào đây để xem các danh sách các plugin Babel.

Ví dụ : Để xử lý yếu tố mà chúng tôi đã đề cập trong phần trình làng " sử dụng những function mũi tên trong mọi trình duyệt ", chúng tôi hoàn toàn có thể chạy lệnh setup :

npm install --save-dev  @babel/plugin-transform-arrow-functions

Bây giờ nếu chúng ta có một script.js với nội dung này:

var a = () => { };
var a = (b) => b;
const double = [1, 2, 3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
    _name: “Bob”,
    _friends: [“Sally”, “Tom”],
    printFriends() {
        this._friends.forEach(f =>
            console.log(this._name + " knows " + f));
    }
};
console.log(bob.printFriends());

Babel biên dịch script.js như sau:

var a = function () { }; var a = function (b) {
    return b;
};
const double = [1, 2, 3].map(function (num) {
    return num * 2;
}); console.log(double); // [2,4,6]

var bob = {
    _name: “Bob”,
    _friends: [“Sally”, “Tom”],
    printFriends() {
        var _this = this;

Như bạn hoàn toàn có thể thấy, toàn bộ những hàm mũi tên đã được quy đổi thành những hàm JavaScript ES5 .

Babel Preset

Trên thực tế chúng ta hiếm khi sử dụng một plugin riêng lẻ, thay vào đó chúng ta sẽ sử dụng một nhóm các plugin khác nhau, và mỗi nhóm các plugin được gom lại thành một preset.

Các cài đặt trước phổ biến nhất là env và  react.

Với env đặt trước

Các env cài đặt trước rất hay: bạn có thể cho nó biết môi trường nào bạn muốn hỗ trợ và nó làm mọi thứ cho bạn, nó hỗ trợ tất cả các tính năng JavaScript hiện đại.

Ví dụ : “ tương hỗ 2 phiên bản sau cuối của mọi trình duyệt, nhưng so với Safari, hãy tương hỗ tổng thể những phiên bản kể từ Safari 7 `

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

hoặc “Tôi không cần hỗ trợ trình duyệt, chỉ cần để tôi làm việc với Node.js 6.10 ”

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

Với react đặt trước

Các react cài đặt trước rất thuận tiện khi viết ứng dụng React: thêm preset-flow, syntax-jsx, transform-react-jsx, transform-react-display-name.

Để tăng trưởng ứng dụng React với những quy đổi JSX và tương hỗ Flow, đơn thuần là bạn chỉ cần thêm tổng thể vào .
Xem thêm Babel Preset