使用babel把es6語法轉換成es5

Babel 是什麼

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。

Babel能用在哪裏

NodeJs

使用 npm 初始化項目

$ mkdir es6-to-es5
$ npm init -y

安裝Babel

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

安裝完成以後, 你的 package.json 會加入這些代碼

"devDependencies": {
   + "@babel/cli": "^7.12.8",
   + "@babel/core": "^7.12.9"
  }

如今把 Babel 的運行命令放入到 npm 腳本中, 也是在 package.json 中

"scripts": {
+     "build": "babel src -d lib"

  }

建立.babelrc配置文件

$ npm install @babel/preset-env --save-dev

建立babel.config.json文件,寫入如下內容

{
  "presets": ["@babel/preset-env"]
}

環境都配置完成, 下面開始正式寫代碼了

寫一段ES6代碼

建立 /src/index.js

$  mkdir src
$  touch src/index.js

寫入一個簡單的箭頭函數

let sayHello = () => {
    console.log('hello xiaotaideng')
}

sayHello()

如今運行剛剛寫好的啓動腳本

$ npm run build

完成以後能夠看到目錄中新增了一個build文件夾,打開裏面的index.js它的內容是這樣的

"use strict";

var sayHello = function sayHello() {
 console.log('hello xiaotaideng');
};

sayHello();

如今執行下面的命令

$  node build/index.js

能夠正常的輸出，到如今好像已經能夠正常的使用了

原文地址 https://segmentfault.com/a/11...