1. 新建專案目錄，在根目錄下建立兩個資料夾（src和dist）和主檔案（index.html）:

• src：編寫的 ES6 語法的 JS 檔案存放的目錄，如 es6.js；
• dist：用 babel 將 ES6 語法編譯為 ES5 語法後存放的目錄,如 es5.js；
• index.js：檔案中 <script> 標籤引入的 JS 檔案為 dist 資料夾中編譯好的 ES5 語法的 JS 檔案，如：

<script src="./dist/es5.js"></script>

2. 初始化專案，建立 package.json 檔案

npm init -y

     順便修改其中 "scripts" 內容，簡化編譯轉化命令

// 將 package.json 中的以下內容：
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

// 修改為：
"scripts": {
    "build": "babel src/index.js -o dist/index.js"
  }

3. 先全域性安裝 Babel-cli，再本地開發依賴安裝 babel-cli 和 babel-preset-es2015

// -g 全域性安裝
cnpm i babel-cli -g

// -D 本地開發依賴安裝
cnpm i babel-cli babel-preset-es2015 -D
 

4. 根目錄下新建 .babelrc 檔案，並輸入：

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

5. 這樣子 ES6 的開發環境就搭建好了，接下來就可以開心的寫 ES6 程式碼了，寫完可以執行 npm run build 命令進行轉化了。

注：

雖說 babel-preset-es2015 已經過時了，但用起來簡單方便，僅轉化 ES6 基本夠用，適合新手