|
現(xiàn)在Chrome瀏覽器已經(jīng)很好的支持ES6了,，但有些低版本的瀏覽器或其他瀏覽器還是不支持ES6的語法,，因此實(shí)際項(xiàng)目開發(fā)或上線過程中就需要把ES6的語法轉(zhuǎn)變成ES5的語法,。項(xiàng)目開發(fā)過程中 Webpack 有自動編譯轉(zhuǎn)換功能,，因此免去了環(huán)境搭建這一步,。但除了Webpack自動編譯外，我們還可以用Babel來完成編譯,。下面搭建一個基本的ES6開發(fā)環(huán)境,。 一,、全局安裝babel-cli在CMD終端命令行 或 代碼編輯工具(vscode、webstorm) 終端中 輸入以下命令,，全局安裝babel-cli,。 npm install -g babel-cli 或 cnpm install -g babel-cli 二、新建源文件目錄和基礎(chǔ)文件 index.html,、jindex.js1,、新建源文件目錄和基礎(chǔ)文件 index.html、jindex.js 2,、項(xiàng)目初始化 npm init -y 三,、本地安裝 babel-preset-env 和 babel-clinpm 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 當(dāng)然也可以兩個命令合并執(zhí)行 npm install --save-dev babel-preset-env babel-cli 或 cnpm install --save-dev babel-preset-env babel-cli 安裝完成后，package.json文件中會自動添加 devDependencies 屬性及內(nèi)容,。 新建 .babelrc文件,，在根目錄下新建.babelrc文件，并鍵入以下代碼,?！ 。?span style="color: rgba(255, 0, 0, 1)">注：.babelrc文件就是一般的文本文件,，不是json文件） {
"presets":["env"],
"plugins":[]
}.babelrc文件建立完成后,，所有的準(zhǔn)備工作全部就緒。現(xiàn)在可以在終端命令行 輸入轉(zhuǎn)換命令：babel src/index.js -o dist/index.js,。 babel src/index.js -o dist/index.js 四,、簡化(格式化)轉(zhuǎn)換命令上面那一串命令是不是既長又不規(guī)則，輸起來還麻煩,，記起來也麻煩,。所以迫切需要將上面那一串命令簡化和格式化，恰好這段時間一直在整Electron,，Electron項(xiàng)目的啟動命令：npm start,；打包命令：npm run-script package 都很簡潔且規(guī)整，所以可以借鑒這一點(diǎn),。 打開 package.json文件,，找到 "scripts" 項(xiàng)，把想簡化和格式化成的命令 寫入 "scripts" 內(nèi),。如想簡化成：npm run dev,，則在 "scripts" 內(nèi)添加如下代碼： "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"},按照這種格式，哪怕想格式化成自己的姓名都行,。既方便記憶,，又方便輸入,。修改好以后，下次轉(zhuǎn)換代碼直接輸入和執(zhí)行命令：npm run xxxxxx 就行了(甚至直接用 npm run xxxxxx 當(dāng)命令都行),。下面是 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的本地開發(fā)環(huán)境正式搭建完畢，下面就可以隨意學(xué)習(xí)和開發(fā)了,，并進(jìn)行代碼轉(zhuǎn)換,。最后，附上幾個Babel常見命令： 1,、直接輸入babel-node命令,，在命令行中直接執(zhí)行ES6代碼： babel-node 2、轉(zhuǎn)換es6.js文件并在當(dāng)前命令行 程序窗口中輸出 轉(zhuǎn)換后的ES5代碼： babel es6.js 3,、將es6.js轉(zhuǎn)換后輸出到es5.js文件中（使用 -o 或 --out-file）： babel es6.js -o es5.js babel es6.js --out-file es5.js 4,、實(shí)時監(jiān)控es6.js文件變化，有變化就重新編譯（使用 -w 或 --watch）： babel es6.js -w --out-file es5.js babel es6.js --watch --out-file es5.js 5、編譯整個src文件夾并輸出到dist文件夾中（使用 -d 或 --out-dir） babel src -d dist 6,、編譯整個src文件夾并輸出到一個文件中 babel src --out-file es5.js 最后的最后,，ES6的整個學(xué)習(xí)歷程都參考 了 阮一峰 老師的 ECMAScript 6 入門 教程，教程內(nèi)容詳實(shí),、舉例清晰明確,、代碼講解通俗易懂，在此特此感謝,！ |
|
|
