使用Babel將ES6+轉換成ES5

使用Babel將ES6+轉換成ES5

做者：吳業飛
時間：2019年2月18日

---

環境，版本信息

node: v8.11.1
npm: v6.5.0
babel: v7.3.0

安裝

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

npm install --save @babel/polyfill

這裏特別說明一下，這兩條安裝命令是babel官網上的，我在實際安裝過程當中使用VScode裏的終端，會報錯，緣由是不識別@，只要加上""就能夠了，像這樣

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

npm install --save '@babel/polyfill'

配置

在項目根目錄建立.babelrc文件

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry"
        }
      ]
    ]
  }
複製代碼

運行

假設目錄結構是

dist
	js
src
	js
		promise.js
node_modules
.babelrc
package-lock.json
package.json
複製代碼

咱們在命令行輸入./node_modules/.bin/babel ./src/js --out-dir ./dist/js便可將./src/js目錄下的全部js文件經過Babel轉化後輸出到./dist/js目錄下

寫在最後

本文只介紹了最簡單的Babel使用方法，若是要結合構建工具使用，相關配置還需參照babel官網

參考文獻

【1】babel官網