體驗最新的 JS 語法:Babel


Posted by saffran on 2021-02-25

把新的 JS 語法(ES6)轉換成舊的語法(ES5)

Babel 實戰

進入 Babel 官網的 Setup > 選擇 CLI,透過 Command line 的方式去做轉換

第一步:首先,在專案資料夾裡面,要先有一個 node.js 的資料夾

輸入指令 npm init (一直按 Enter)來產生出 package.json

第二步:輸入下列指令,來安裝 babel 的兩個套件:babel/core 和 babel/cli

npm install --save-dev @babel/core @babel/cli

裝好之後,在 package.json 裡面就會自動新增 babel/core 和 babel/cli 這兩個 Dependencies

  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3"
  }

第三步:加上 build

在 package.json 的 "scripts" 加上這段 "build": "babel src -d lib"

  "scripts": {
    "build": "babel src -d lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

加上之後,當我在 CLI 輸入指令 npm run build,就會執行 build 裡面寫好的這行 babel src -d lib,意思就是:
我要執行 babel 這個指令,幫我編譯 src 資料夾裡面的內容(source code 都會寫在 src 資料夾裡面),編譯之後的檔案都會放到目的地也就是 lib 資料夾內(-d 就是 destination 的意思)

第四步:新增 babel 的設定檔 .babelrc

在專案資料夾的根目錄新增一個檔案叫做 .babelrc
然後在 .babelrc 檔案裡面貼上這段:

{
  "presets": ["@babel/preset-env"]
}

這段的意思就是:
presets 就是 babel 給的一些預設設定,我要用這些預設設定來轉換程式碼

接著,要把這個 presets 安裝起來,輸入指令:

npm install @babel/preset-env --save-dev

安裝完 presets 之後,可以去 @babel/preset-env 的文件 看要如何設定更多細節
例如:可以設定我想要支援哪一些瀏覽器
Browserslist Integration 可以設定要支援「還有 25% 以上的人在使用的瀏覽器」

第五步:開始使用 babel

現在,就可以在專案資料夾裡面新增一個 src 資料夾 > 在 src 資料夾新增一個 demo.js

在 demo.js 裡面,就可以用最新的 JS 語法來寫,然後在 CLI 輸入指令 npm run build 之後,打開 lib 資料夾裡面的 demo.js 就可以看到編譯過後的程式碼了(編譯成舊的 JS 語法)


#babel







Related Posts

初探網頁前後端架構

初探網頁前後端架構

Day03 : 字典、集合

Day03 : 字典、集合

交作業流程 Week1-hw1

交作業流程 Week1-hw1


Comments