將ES6程式碼轉換為ES5程式碼

打醬油的女孩子發表於2020-09-24


注意:轉碼不是必須的,看自己的需求,轉碼是為了相容低版本的瀏覽器
Babel 是一個廣泛使用的ES6轉碼器,可以將ES6轉化為ES5
##安裝步驟(前提安裝了Nodejs)
注:沒安裝cnpm下面的cnpm就用npm就可以

(一)單個js檔案解碼

1 命令在專案目錄中,安裝Babel

cnpm install --save-dev @babel/core

2 配置檔案.babelrc

Babel 的配置檔案是.babelrc,存放在專案的根目錄下。使用 Babel 的第一步,就是配置這個檔案。

該檔案用來設定轉碼規則和外掛,基本格式如下:
{
“presets”: [],
“plugins”: []
}

3 安裝轉碼規則

最新轉碼規則
$ npm install --save-dev @babel/preset-env
react 轉碼規則//沒學就裝上面那個就行
cnpm install --save-dev @babel/preset-react

4 配置.babelrc

{
“presets”: [
“@babel/env”,
“@babel/preset-react”//上面沒裝react轉碼規則這個就刪除掉
],
“plugins”: []
}

5 命令列轉碼

cnpm install --save-dev @babel/cli

6 控制檯轉碼輸出(不常用)

npx babel example.js

7 將轉碼結果寫入一個檔案

npx babel example.js -o compiled.js

(二)整個目錄轉碼

npx babel src -d lib

相關文章