上篇已經把許多東西都設定完，這篇要來把 kintone 相關的設定都搞好，我們的理想是打上 pnpm run dev 之後，可以把所有專案都啟動，或是只選自己要開啟的專案，之後也可以依樣畫葫蘆建構 production 版本的程式碼到正式環境。

改成 kintone 能啟動的專案

之前的文章有提到過，會需要 https 以及 uploader 之類的設定，請參考之前的文章 kintone 開發環境建置，將每個 app 的 rsbuild.config 都設定完成。

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { pluginBasicSsl } from '@rsbuild/plugin-basic-ssl'

export default defineConfig({
  plugins: [pluginReact(), pluginBasicSsl()],
  server: {
    port: 5100
  }
})

然後每個 apps 底下的專案，都要有一個 manifests/ 的資料夾，放上要上傳的測試及正式環境：

// manifest.dev.json
{
  "scope": "ALL",
  "desktop": {
    "js": ["https://localhost:5100/app.js"],
    "css": [""]
  },
  "mobile": {
    "js": ["https://localhost:5100/app.js"],
    "css": [""]
  }
}

要注意的是 port 要一樣，不然沒辦法用。

.env

避免直接將帳號密碼及 APP ID 寫死，我們在根目錄建立 .env，並安裝 kintone-uploader-env：

pnpm i -D -w kintone-uploader-env @kintone/customize-uploader

.env 範例：

KINTONE_BASE_URL=
KINTONE_USERNAME=
KINTONE_PASSWORD=

APP1_ID=
APP2_ID=

然後在 apps 子專案的 packages.json 補上 dev 指令：

"dev": "kintone-uploader-env -app APP1_ID -e ../../.env && rsbuild dev",

也可以依樣畫葫蘆打上 update：

"build": "rsbuild build",
"update": "pnpm run build && kintone-uploader-env -m ./mainfests/prod.json -app APP1_ID -e ../../.env",

啟動專案：

我們在根目錄的 packages.json 加上：

"dev": "pnpx nx --filter apps run-many -t dev"

如此一來就可以方便的啟動 apps 底下的子專案了。

關於打包專案

上一篇中有導入 nx 協助我們開發 monorepo，這個時候就派上用場了。如果 apps 底下的其中一個子專案沒有異動的話，那實際上這個專案根本不需要打包，反之如果 packages/utils 裡面的內容更動的話，依賴的專案應該要重新打包，所以我們會需要用到 affected 指令，這在上一篇的結尾有提到。

pnpx nx affected --parallel

• affected：檢查異動項目。
• parallel：並行處理任務。

這個指令很適合用來上傳 kintone 檔案時使用，把它整合進去 CI 會非常實用，只不過要用的話還需要配合 nx cloud，避免本地的 .nx 緩存檔案不斷更新，還一直被 push 到遠端倉庫。

以上就是 Monorepo 架構下的 kintone 開發，希望大家可以玩玩看這種開發模式。