前言：由於目前瀏覽器對ES6的支持度不高，需要藉助babel將編寫好的ES6代碼轉換成ES5，瀏覽器才能解析。 需要在NodeJS環境下運行 一. 建立結構：兩個文件夾和一個html文件，分別是src和dist還有index.html，還要在src目錄下新建一個index.j... ...
前言：由於目前瀏覽器對ES6的支持度不高，需要藉助babel將編寫好的ES6代碼轉換成ES5，瀏覽器才能解析。
需要在NodeJS環境下運行
一. 建立結構：兩個文件夾和一個html文件，分別是src和dist還有index.html，還要在src目錄下新建一個index.js文件，併在index.html里將其引用進去
如： dist
src
- index.js
index.html
下麵是index.html中的代碼： (註意index中引用的js是dist目錄下的，因為dist是編譯後的js，src里的js是我們編寫的es6代碼)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./dist/index.js"></script> 9 </head> 10 <body> 11 hello es6 12 </body> 13 </html>
二.初始化項目：
用 cnpm init -y
說明：cnpm是淘寶的鏡像源，因為npm安裝往往很慢，沒有安裝的朋友可以直接將下麵的地址複製到命令行按回車即可安裝，就能使用cnpm了，-y代表全部預設同意，就不用一次次按回車了：npm install -g cnpm --registry=https://registry.npm.taobao.org
三.安裝Babel相關：
1.全局安裝 babel-cli
cnpm install babel-cli -g
2.本地安裝babel-preset-es2015 和 babel-cli
cnpm install babel-preset-es2015 babel-cli --save-dev
四.根目錄下新建：.babelrc 文件，並打開編輯：
1 { 2 "presets":[ 3 "es2015" 4 ], 5 "plugins":[] 6 }
•上面4大步配置好後，此時我們到src目錄下的index.js文件中嘗試編寫ES6語法的js代碼:
1 let msg = "hello es6"; 2 console.log(msg);
編寫完後我們最後一步就是編譯了，接下來就是見證奇跡的時候了，打開終端，定位到當前目錄，這裡推薦使用Visual Studio Code編輯器，會自動定位到當前目錄：
1 babel src/index.js -o dist/index.js
這時到dist目錄下去看，你會發現多了一個index.js的文件，並且裡面的代碼就是剛剛src目錄下的index.js文件編譯後的es5代碼：
1 "use strict"; 2 3 var msg = "hello es6"; 4 console.log(msg);
至此，ES6的運行環境搭建完成並且運行成功！
總結：1建立目錄結構
2初始化當前項目
3安裝babel編譯工具
4編譯打包：babel src/index.js -o dist/index.js
小技巧：簡化編譯打包命令：打開根目錄的package.json文件，將"srcipt"下添加一段代碼：
以後編譯打包直接用： npm run build 就可以了，不用 babel src/index.js -o dist/index.js 一長串這麼麻煩
1 "scripts": { 2 "build": "babel src/index.js -o dist/index.js" 3 }
