---
# System prepended metadata

title: Esbuild 安裝(打包工具)
tags: [JavaScript]

---

Esbuild 安裝(打包工具)


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

建立資料夾=>建立dist,src資料夾
src放要打包的檔案
dist放要輸出的檔案
並參照下圖建立html檔案跟一個Js檔案然後放入src資料夾裡頭
![image](https://hackmd.io/_uploads/ByMAVYFwA.png)


![image](https://hackmd.io/_uploads/SkiErtKvR.png)
開啟終端機 =>打入指令`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


![image](https://hackmd.io/_uploads/ryH7vYKvR.png)
![image](https://hackmd.io/_uploads/BkXsvFtvA.png)


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

最後指令為
`npm run build`

就會像下圖這樣
![image](https://hackmd.io/_uploads/Byvb_ttw0.png)

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

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

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

![image](https://hackmd.io/_uploads/rJxr2YKPA.png)


![image](https://hackmd.io/_uploads/rJC73YYP0.png)

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


