昨天建置完環境後，大家應該有感覺到每次都上傳 URL 或是打包過後的 JS/CSS 檔案到 kintone 上面，是一件很麻煩的事情，尤其專案一多，手動就有可能會造成失誤，所以我們來用官方開發的好工具 kintone-customize-uploader 來幫我們上傳檔案到 kintone 上面。

使用方式

首先在專案安裝套件：

npm install @kintone/customize-uploader -D

再來可以透過指令去建立專案：

kintone-customize-uploader dest/customize-manifest.json

或是手動在專案中建立檔案 manifest.json，並寫入以下內容

{
  "app": 10,
  "scope": "ALL",
  "desktop": {
    "js": [],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

這些東西代表的意思是：

• app：應用程式 ID。
• scope：上傳客製化檔案影響的範圍，可以填 ALL、ADMIN、NONE 其一。
• desktop：電腦版的上傳內容，陣列中填寫路徑或 URL。
• mobile：手機版的上傳內容，陣列中填寫路徑 URL。

關於參數

kintone-customize-uploader 有提供以下參數，在寫指令的時候可以帶上：

• --base-url：你的 kintone 環境 domain。
• --username：使用者帳號。
• --password：使用者密碼。
• --oauth-token：OAuth 的 token。
• --basic-auth-username：basic 認證的帳號。
• --basic-auth-password：basic 認證的密碼。
• --proxy：代理 Server。
• --watch：監聽檔案異動後上傳。
• --dest-dir：指定輸出位置。
• --lang：使用者語言。
• --guest-space-id：訪客空間的 ID。

上傳檔案

知道上面參數的意義後，為了方便我們可以直接寫到 package.json 中的 scriptS 當中，例如以下：

  "scripts": {
    "update": "kintone-customize-uploader --base-url https://test.cybozu.com --username Admin --password 12345678 "
    // 略...
  },

這樣在跑 npm run update 就可以幫我們上傳檔案了。

import 指令

如果 kintone 裡面的應用程式已經有人開發過，裡面已經有不少 JS/CSS 檔案的話，我們可以透過 import 指令幫我們把這些檔案下載下來，並且更新本地的 manifest 檔案。使用方法指令是直接加上 import。

  "scripts": {
    "update": "kintone-customize-uploader import --base-url https://test.cybozu.com --username Admin --password 12345678 "
    // 略...
  },

他會產生一個這樣的資料夾結構：

所以如果有打算用 import 指令的話，最好遵循官方產生的架構，避免兩邊不一致，不然就是自己手動把檔案下載下來整理。

kintone-uploader-env

我個人的開發習慣是把 domain、帳號密碼、應用程式 ID 都寫在 .env 檔案中，但官方開的套件沒辦法這樣讀取，為了讓 window 及 MAC 都能方便讀取 .env，所以我寫了 kintone-uploader-env 這個小工具。

使用上只需要建立 .env 以及 manifest.json 即可，.env 的格式如下：

KINTONE_BASE_URL=
KINTONE_USERNAME=
KINTONE_PASSWORD=
APP_ID=

當然也提供幾個參數使用：

• -e：指定 .env 的檔案路徑，預設為 .env。
• -m：指定 mainfest.json 的檔案路徑，預設為 mainfests/dev.json。
• -app： 指定 .env 檔案中的 key 值。

如此一來就可以執行 npx kintone-uploader-env 上傳了，使用前記得也要裝 @kintone/customize-uploader，因為是基於這個套件的小工具。