ES6 - 基礎學習(1): 開發環境搭建

如今Chrome瀏覽器已經很好的支持ES6了，但有些低版本的瀏覽器或其餘瀏覽器仍是不支持ES6的語法，所以實際項目開發或上線過程當中就須要把ES6的語法轉變成ES5的語法。項目開發過程當中 Webpack 有自動編譯轉換功能，所以免去了環境搭建這一步。但除了Webpack自動編譯外，咱們還能夠用Babel來完成編譯。下面搭建一個基本的ES6開發環境。

1、全局安裝babel-cli

　　在CMD終端命令行 或 代碼編輯工具(vscode、webstorm) 終端中 輸入如下命令，全局安裝babel-cli。

　　npm install -g babel-cli 或 cnpm install -g babel-cli

2、新建源文件目錄和基礎文件 index.html、jindex.js

　　一、新建源文件目錄和基礎文件 index.html、jindex.js

　　　　

　　　　

　　二、項目初始化

　　　　npm init -y

　　　　

　　　　

3、本地安裝babel-preset-es2015 和 babel-cli

　　npm install --save-dev babel-preset-env 或 cnpm install --save-dev babel-preset-env

　　npm install --save-dev babel-cli 或 cnpm install --save-dev babel-cli

　　固然也能夠兩個命令合併執行

　　npm install --save-dev babel-preset-env babel-cli 或 cnpm install --save-dev babel-preset-env babel-cli

　　安裝完成後，package.json文件中會自動添加 devDependencies 屬性及內容。

　　　　

　　新建 .babelrc文件，在根目錄下新建.babelrc文件，並鍵入如下代碼。　　（注：.babelrc文件就是通常的文本文件，不是json文件）

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

　　.babelrc文件創建完成後，全部的準備工做所有就緒。如今能夠在終端命令行 輸入轉換命令：babel src/index.js -o dist/index.js。

　　babel src/index.js -o dist/index.js

　　　　

3、簡化(格式化)轉換命令

　　上面那一串命令是否是既長又不規則，輸起來還麻煩，記起來也麻煩。因此迫切須要將上面那一串命令簡化和格式化，剛好這段時間一直在整Electron，Electron項目的啓動命令：npm start；打包命令：npm run-script package 都很簡潔且規整，因此能夠借鑑這一點。

　　打開 package.json文件，找到  "scripts" 項，把想簡化和格式化成的命令 寫入 "scripts" 內。如想簡化成：npm run dev，則在 "scripts" 內添加以下代碼：

　　 "dev": "babel src/index.js -o dist/index.js"

　　如想簡化成：npm run build，則把 dev 換成 build 便可，改爲以下便可：

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel src/index.js -o dist/index.js"
    },

　　按照這種格式，哪怕想格式化成本身的姓名都行。既方便記憶，又方便輸入。修改好之後，下次轉換代碼直接輸入和執行命令：npm run xxxxxx 就好了(甚至直接用 npm run xxxxxx 當命令都行)。下面是 package.json 所有代碼以及效果截圖：

{
    "name": "ES6",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "xxxxxx": "babel src/index.js -o dist/index.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.7.0"
    }
}

　　　　　　

到此爲止，ES6的本地開發環境正式搭建完畢，下面就能夠隨意學習和開發了，並進行代碼轉換。