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...