【Mineflayer】從零開始寫 Minecraft Bot－Ep.1 TypeScript 設定、第一支 Mineflayer 程式

我們先來完成第二點，集中 JS 檔的部分，如上圖先新增兩個資料夾，分別是 src、dist，src 是用來放我們 TS 檔的位置，dist 則是編譯後的 JS 檔的位置，這兩個名字只是一般寫程式的習慣而已，以後如果在其他地方看到 src 資料夾，裡面放的可能就會是該專案的原代碼。

接著打開 tsconfig.json 檔，利用 Ctrl + F 搜尋 rootDir，找到如上圖的設定，點擊該行後，按下 Ctrl + / 來將前面的 // 移除，或是手動刪除也可以，// 是註解的意思，不會讓後面的東西被電腦讀取到，就是寫給人看的備註，這在 JS 或 TS 當中也是一樣，詳細之後在談。

總之移除註解之後，將後方的 "./" 修改成 "./src"，rootDir 是根目錄的意思，在這裡就是代表我們用來寫 TS 檔案的主要資料夾，而後方的值就是資料夾的路徑，原本的 ./ 是代表當前資料夾的意思，是一個相對位置，而 ./src 就是代表當前資料夾底下的 src 資料夾，也就是我們剛剛建立的 src 資料夾。

另外再搜尋 outDir，以同樣的方式，將後方的值改成 "./dist"，outDir 是指輸出目錄，就是代表編譯後的 JS 檔要放置的位置，後面值的原理就跟剛剛的 rootDir 一樣，是一個資料夾路徑。

最後再搜尋 strict，將後方的 true 改成 false，這是指 TS 會不會非常嚴格的檢查我們寫的語法有沒有問題，建議把它關掉，不然之後可能會寫得很痛苦。

都設置完成以後，就將 app.ts 拖曳到 src 裡面，以後 app.ts 就是我們 TS 專案的進入點，不會再去改變它了，而上次生成的 app.js 可以先刪除，讓我們來測試一次剛剛設定的東西有沒有成功。

打開你的終端機，還記得嗎？按下 Ctrl + `，再次輸入 tsc 來編譯我們的 TS 檔，編譯完成後，應該就會看到 JS 檔被生成在 dist 資料夾裡面了，是不是變得比較整齊了一些呢？

接下來我們就要回去處理第一點，只用一個指令執行 TS 檔，讓我們打開 package.json 檔，找到其中有個叫做 scripts 的設定，我們要來新增兩個腳本，在 test 的尾巴後面按下 Enter 換行，如上圖新增一個名為 build 的腳本，並且在值的欄位寫上 tsc，也就是我們編譯 TS 檔的指令，記得要用 "" 包起來，後面的值也是一樣。

完成後再新增一行，名稱為 start，值的部分寫上 npm run build && node ./dist/app.js，它的用途就是先執行一次剛剛的 build，也就是編譯 TS 檔，然後再執行 node 去執行編譯後的 JS 檔。

如此一來，當我們在終端機輸入 npm start 時，系統就會自動編譯 TS 並執行 JS 檔，讓我們來試試看。

怎麼樣，是不是方便多了呢？在這裡可能有些人會注意到，明明都是 npm 執行某個腳本，為什麼執行 build 前面要加上 run，執行 start 時卻不用，因為 start 是 npm 預設的腳本名稱，當我們執行 npm start 時，系統會預設我們是要執行 npm run start，讓我們可以省略 run 參數，而 build 是我們自訂的腳本名稱，所以需要加上 run 來告訴 npm 我們是要執行它。

最後，讓我們點擊左邊功能欄的第五個頁面 Extensions（擴充），我們可以在這裡安裝一些擴充功能，來輔助我們撰寫程式，我用 VS Code 寫程式的經驗其實也不久，對套件其實也不太熟悉，總之你可以在上方的欄位搜尋 Prettier 找到如上圖的第三個「Prettier - Code formatter」，或是輸入 TypeScript 找到一些跟 TS 有關的套件，如「JavaScript and TypeScript Nightly」，簡單的說這些套件的功能主要都是幫我們格式化我們的程式碼，讓它看起來比較整齊一點，並將程式碼的各個部分用不同的顏色標示清楚，方便我們閱讀，還有可以自動幫我們 import 一些東西，這個實際上寫的時候就知道了。

其他還有像是 ESLint、IntelliCode 等，例如 IntelliCode 是一個 AI 輔助套件，甚至也有讓 VS Code 變成繁體中文的語言套件「Chinese (Traditional) Language Pack for Visual Studio Code」，有需要的可以自己去搜尋看看有沒有你需要的套件可以安裝，如果不想要搞得太複雜，就像我一樣裝上圖中的那些就好了。

要開始寫一個新的程式，或使用新的函示庫以前，第一件事情就是到官網上去看看範例，因此讓我們回到 Mineflayer 的官方 GitHub 上面去看看。

我們可以在介紹頁面找到如上圖的範例程式，什麼都不用說，直接點擊右上角的複製按鈕，貼到我們的 app.ts 裡面去看看。

如果你在這個時候使用 npm start，執行的話，沒有意外應該會出錯，並在最後出現一條訊息，主要有兩個原因，讓我來解釋一下。

如果你只是想要在單人測試看看 Bot 的效果，那麼可以考慮把範例中 'microsoft' 的部分改成 'offline'，也就是離線狀態，這樣 Bot 就不會進行帳號驗證、登入，可以直接加入你的世界，當然這樣也就沒辦法加入多人伺服器。

至此，我們得先了解一件事情，我們本系列的目標是寫一個可以應用於 廢土伺服器 的 Minecraft Bot，也就是說要加入多人伺服器，而要加入多人伺服器就得要有帳號，並非是我們隨便寫一個程式就可以讓 Bot 加入到伺服器中，除非伺服器沒有開啟正版驗證，也就是說伺服器中的每一個 Bot 都代表著一個 MC 帳號，如果你自己只有一個 MC 帳號，但想要多一個 Bot 來幫你做事的話，那麼首先你應該做的事情是再去買一個 MC 帳號，並且讓你的 Bot 使用這個新帳號來進行登入，或是讓 Bot 直接使用你的帳號登入也可以，但這樣你就看不到 Bot 在遊戲內的身影了。

我們接下來的教學都是以有兩隻帳號為前提去進行的，一隻帳號作為 Bot 使用，而主要帳號在遊戲中向 Bot 下達指令，當然就算只有一隻帳號，還是可以在單人進行練習，只是環境不一樣，可能會導致我們的程式碼在某些細節處理上也不太一樣。

接下來讓我一一的解釋範例中的程式都在做什麼，首先如上圖，除了中文註解以外，我稍微改掉了第一行的程式，這是我們在寫 TS 的習慣，比起原本 JS 的 require()，在 TS 中我們一般會使用 import ... from 來引用其他檔案、函示庫，但用途不變，目的都是為了將 mineflayer 這個函示庫裡面的功能，被儲存在一個 叫做 mineflayer 的變數之中，看起來似乎有點饒舌，之後就會懂了。

接著範例中使用了 mineflayer 裡面的 createBot 功能來創造一個 Bot，並且我們可以賦予一些參數：