搭建步驟:1、安裝babel-cli工具,語法「npm install --save-dev babel-cli」;2、安裝依賴,語法「npm install --save-dev babel-preset-es2015 babel-cli」;3、設定根目錄下的「.babelrc」文件,設定轉碼規則;4、在package.json中修改scripts指令執行項目即可。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
es6是ECMAScript2015。 es6是js的子集,但我們一般說的js是es6之前的版本。 js本身是很不完美的語言,但es6將js很多醜陋的部分透過語法糖隱藏了。它提供了許多特性,像jascript資料處理,箭頭函數,解構賦值,Default Parameters(預設參數),Classes(類別),Modules(模組)等,包括前後端分離用的這些非同步請求方法,能非常好的解決大前端遇到的問題。
工欲善其事必先利其器,哈哈,所以第一步就是搭建一個es6的開發環境。低版的瀏覽器不支援es6的語法,這就需要在運行環境中把es6的語法轉換成es5的語法,在vue中Webpack是有自動編譯和轉換能力的,除了Webpack還有babel可以使用
Babel#是一個廣泛使用的轉碼器,可以將ES6程式碼轉為ES5程式碼,從而在現有環境執行。
這意味著,你可以現在就用 ES6 寫程式,而不用擔心現有環境是否支援。下面是一個例子。
// 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); //上面的原始代码用了箭头函数,这个特性还没有得到广泛支持,Babel将其转为普通函数,就能在现有的JavaScript环境执行了。
babel
#Babel提供babel-cli
工具,用於命令列轉碼。
它的安裝指令如下:
//需要先安装babel-cli npm install --global babel-cli
.babelrc
Babel的設定檔是.babelrc
,存放在專案的根目錄下。使用Babel的第一步,就是設定這個檔案。
該檔案用來設定轉碼規則和插件,基本格式如下。
{ "presets": [], "plugins": [] }
presets
欄位設定轉碼規則,官方提供以下的規則集,你可以根據需要安裝。
# ES2015转码规则 npm install --save-dev babel-preset-es2015 # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-preset-stage-1 npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-stage-3
然後,將這些規則加入.babelrc
。
//例如:按需求添加 { "presets": [ "es2015", "stage-2" ], "plugins": [] }
# 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s
上面程式碼是在全域環境下,進行Babel轉碼。這意味著,如果專案要運行,全域環境必須有Babel,也就是說專案產生了對環境的依賴。另一方面,這樣做也無法支援不同項目使用不同版本的Babel。
一個解決方法是將babel-cli
安裝在專案中。
# 安装 npm install --save-dev babel-cli
然後,改寫package.json
。
{ // ... "devDependencies": { "babel-cli": "^6.0.0" }, "scripts": { "build": "babel src -d lib" }, }
轉碼的時候,就執行下面的指令。
npm run build
#第一步:(建立本地專案以及目錄)
本地新建資料夾,重新命名為es6test,用vscode程式碼編輯器打開,在資料夾下新建兩個文件,分別是專案文件src,以及打包文件dist文件,在src資料夾下新index.html文件,並列新建index.js文件,並將index.js檔案引入index.html
第二步:(初始化項目,新增轉碼依賴套件)
開啟vscode終端ctrl ~,在檔案根目錄下初始化項目:
npm init -y
會產生一個package.json檔案, -y的目的是在初始化時配置預設值,後續在生成的檔案中修改即可。
npm太慢,先安裝個cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
在終端全域安裝babel-cli
工具,用於命令列轉碼
cnpm install -g babel-cli
這裡迫不及待的想試一試有沒有用,能轉碼不,就先在終端測了一下
babel src/index.js -o dist/index.js
不出我所料啊,肯定不行! dist檔案下方是產生了個index.js文件,但是並未轉換成es5的語法
#再在本機安裝兩個依賴套件
cnpm install --save-dev babel-preset-es2015 babel-cli
package.json中如果出現下面的內容,恭喜你,所有的依賴套件都安裝完了
第三步:(根目錄下.babelrc檔案配置)
第四步:(package.json中修改scripts命令执行项)
第五步:(验收成果,哈哈!)
cnpm run build
你也可以在src/index.js中再写些es6的语法,测试下。
【相关推荐:javascript视频教程、编程视频】
以上是es6運作環境怎麼搭建的詳細內容。更多資訊請關注PHP中文網其他相關文章!