Esbuild 安裝(打包工具)

esbuild官網"https://esbuild.github.io/getting-started/#build-scripts"

建立資料夾=>建立dist,src資料夾
src放要打包的檔案
dist放要輸出的檔案
並參照下圖建立html檔案跟一個Js檔案然後放入src資料夾裡頭

開啟終端機 =>打入指令`npm init -y` 產生package.json檔案=>
安裝需要套件(此套件為上課用一般專案看情況)`npm i dayjs`=>
安裝esbuild => `npm install --save-exact --save-dev esbuild`
=>至json檔案看Script的位置

{
  "scripts": {
    "build": "esbuild app.jsx --bundle --outfile=out.js"
  }
}

將script的部分改成下面的樣子

`"build": "esbuild app.js --bundle --outfile=out.js"`
上圖這段意思如下:
打包app.js，然後輸出到out.js,讓esbuild處理app.js檔案然後處理完後
輸出到out.js


(上圖)為更改後的樣子，更改後dist是沒有檔案的等等最後一部會輸出檔案出來
可以先到html更改連結的js檔案，改成輸出的位置(如上圖)

最後指令為
`npm run build`

就會像下圖這樣

這時候就可以到(src被打包的文件)試試看是否可以正常運作

----------------------------------------------------

因為每次js檔案存檔都需要打`npm run build`才會出現效果，可以在script那段增加一段 `--watch`這樣就會自動build(如下圖)



-------------------------------------------------------