1. 程式人生 > 其它 >學習babel轉碼器

學習babel轉碼器

Babel轉碼器

Babel定義

	Babel 是一個廣泛使用的 ES6 轉碼器,可以將 ES6 程式碼轉為 ES5 程式碼,從而在老版本的瀏覽器執行

Babel安裝

僅需要在專案檔案下安裝
npm install --save-dev @babel/core

Babel轉碼流程

一:配置.babelrc檔案
	建立.babelrc檔案設定轉碼規則和外掛
	格式:{
          "presets": [],//轉碼規則
          "plugins": []
		}
二:安裝轉碼規則
	presets欄位設定轉碼規則
    轉碼規則:
			npm install --save-dev @babel/preset-env //最新規則
			npm install --save-dev @babel/preset-react //react 轉碼規則
三:將轉碼規則加入presets欄位
   {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
   }
四:命令列轉碼
	1.安裝babel命令列工具
		$ npm install --save-dev @babel/cli
    2.轉碼用法
        npx babel example.js //轉碼js檔案
        npx babel example.js -o compiled.js //將js檔案轉碼到指定檔案輸出
        npx babel src -d 資料夾名 //轉碼整個資料夾

Babel轉碼注意事項

    Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全域性物件Babel不會轉碼
    Babel可轉碼的語法可參考(https://www.babeljs.cn/)Babel官網