ES6+轉ES5


  本人近期接到一個天大的“好消息”:zxbc項目某些客戶為保險業等種種原因要支持IE……
  2013年,ES6草案凍結,2015年6月,ES6正式通過,成為國際標准。都9102啦,Chrome還好啦,升級到最新版本,大部分ES6還是ok的,但是萬惡之源IE呢?作為一個前端開發者,兼容萬惡的IE,頓時,胸中萬馬奔騰,此處省略十萬字……
  無奈之舉,擼起袖子開干唄。js先用babel搞個ES6轉ES5唄。

 一、node安裝

 1、計算機-右鍵-屬性-系統類型(我的64位操作系統)

file

 2、下載node
 下載地址:https://nodejs.org/en/download/
file
  找到自己系統對應的32或64位的msi文件下載后安裝即可。
  安裝完成后win+r后輸入cmd終端執行命令:
  node -v
file
  看到版本號即為安裝成功。

  二、npm安裝

 建議使用淘寶鏡像,個人感覺快點,執行命令
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 安裝完成后,執行
 npm -v
 看到版本號即為安裝成功

 三、初始化項目

 1、建立工程目錄
 src:ES6語法編寫的JS文件目錄地址;
 dist:使用Babel轉換成ES5的文件目錄地址,在項目引用這個文件夾里邊的JS文件
file
 2、終端進入項目目錄后執行命令
 cnpm init -y
 -y是指表示全部默認,不用一直敲回車
file
  看到有自動生成的package.json就ok了

  四、Babel安裝

 全局安裝Babel-cli
 終端執行命令:
 cnpm install -g babel-cli

 五、安裝Babel轉換包

 終端執行命令:
 cnpm install --save-dev babel-preset-es2015 babel-cli

 六、在項目根目錄新建(.babelrc)文件輸入一下代碼:

 { "presets": [ "es2015" ], "plugins": [] }
 若用右鍵新建文件后修改重命名提示:必須鍵入文件名,此時可用編輯器新建此文件即可

 七、輸入終端轉換命令即可將ES6編寫的index.js文件轉換為ES5

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

八、簡化終端命令,修改package.json文件中的scripts

file

 之后,修改js文件后終端執行命令即可
 cnpm run build
 這只是js單文件的轉換,多文件的轉換下次在補上……
 共勉,望鞭策!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM