Babel


Posted by tzutzu858 on 2021-04-20

之前筆記[ JavaScript 12 ] ES6 新增特性最下面有提到 Babel ,但因為當時文章的安裝設定和現在有點不一樣了,這邊直接獨立一篇補充


Babel 官網直接說 Babel is a JavaScript compiler.
上面有 Try it out,左邊可以寫新的語法,右邊幫你輸出舊的語法


官網安裝頁面
安裝還是要去看官網最準,像是之前新增 babel 設定檔是 .babelrc,但現在是要新增babel.config.json,兩個就不一樣了

安裝開始

(先說明自己電腦是 window,習慣用 Git Bash)
首先要有 node.js 的資料夾

npm init


只是測試用,所以一直按 enter 就好
ls 看,發現多一個 package.json


安裝 babel/core 和 babel/cli

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

安裝好以後你的 package.json 檔案裡面包含:

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

與其用 CLI 執行 Babel,不如直接放在 npm scripts
打開 package.json ,在 scripts 裡面加上

"build": "babel src -d lib"

這個 build 就是跑 npm run build 的時候,他會執行 babel src -d lib這段,這段意思是執行 babel 指令,source code 都寫在 src 這個資料夾,-d 就是destination,所以 compile 完要放在 lib 這個資料夾


新增 src 資料夾

mkdir src

去 src 資料夾,新增一個 a.js 檔案來做測試

touch a.js

在 a.js 寫一些比較新的語法

const a = 1
const b = [1, 2, 3, 4]
const c = [...b]
for (let i of c) {
    console.log(i)
}

跑起來

npm run build

lib 這個資料夾就多了 a.js
但因為目前沒有任何設定,所以不會去做轉換
要設定的話要新增 babel.config.json ,可以看成 babel 的設定檔
所以在專案根目錄

touch babel.config.json

打開 babel.config.json 這個檔案
把下列複製上去

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

上面 presets 代表預設的設定,意思是我要用這個設定來轉換我的程式碼,那這當然需要安裝

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

細節也可以更動,看官網的文件,可以設定像是我要用多少%的人在用的瀏覽器等等細節


再次跑起來

npm run build

再次打開 lib 資料夾裡的 a.js,就發現多了很多東西,這樣在舊的瀏覽器就可以跑了










Related Posts

[進階 js 03] == 和 === 的 special case

[進階 js 03] == 和 === 的 special case

CSS 漸層 補

CSS 漸層 補

Day3 讓我見識一下吧,終端機的性能

Day3 讓我見識一下吧,終端機的性能


Comments