前言

在上一篇文章 kintone 外掛開發 ② 簡單實作範例 part 1 - 動手打包第一個外掛 中，我們介紹了一個根據條件在表格外欄位加總表格內數值的客製化範例，並說明如何將這段客製化程式碼打包成一個可匯入的外掛。

接下來，我們將進一步教大家如何製作外掛的設定畫面。不過在開始實作之前，有兩個實用工具值得先介紹：

• webpack-plugin-kintone-plugin：kintone 官方提供的 webpack 擴充套件，改能夠協助自動打包外掛並產出 plugin.zip。
• @kintone/plugin-uploader：可將 plugin.zip 自動上傳至 kintone 的測試環境。

透過這兩個工具以及 webpack 的整合，我們可以在開發過程中即時監聽程式碼修改，自動打包並上傳外掛，省去繁瑣的手動操作，大幅提升開發效率與便利性。

使用 webpack-plugin-kintone-plugin 建立開發環境

本篇將實際說明如何整合 webpack-plugin-kintone-plugin 與 @kintone/plugin-uploader，打造一套更方便的外掛開發環境。透過這些工具，每次程式碼修改後，外掛會自動重新打包並上傳至 kintone，讓開發與測試更加順暢。

※註：本文的操作步驟是延續上一篇文章 kintone 外掛開發 ② 簡單實作範例 part 1 - 動手打包第一個外掛 的內容進行，建議先閱讀並完成前一篇實作，再繼續本篇教學。

Step 1：安裝必要套件

首先，透過 npm 安裝我們所需的開發套件：

npm install -D @kintone/webpack-plugin-kintone-plugin @kintone/plugin-uploader webpack webpack-cli npm-run-all

Step 2：建立外掛打包資料夾

接著，建立一個名為 plugin 的資料夾，用來存放 kintone 外掛打包所需的檔案：

mkdir plugin

然後，將以下資料從 src 資料夾移動到 plugin 資料夾中：

• manifest.json
• html 資料夾
• image 資料夾
• （雖然上次的實作中沒有，但若有 css 資料夾也一併移動）

這些是除了 JavaScript 檔案以外的所有靜態資源。

Step 3：建立 webpack 設定檔

在專案根目錄下新增 webpack.config.js，內容如下：

const path = require('path')
const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin')

module.exports = {
  // 指定需要以 webpack 打包的 JavaScript 檔案
  entry: {
    customize: './src/js/customize.js',
    config: './src/js/config.js',
  },
  // 指定 webpack 打包後的檔案輸出位置（plugin/js 資料夾下）與檔名
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js',
  },
  // 外掛打包相關設定
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './dist/private.ppk',
      pluginZipPath: './dist/plugin.zip',
    }),
  ],
}

Step 4：設定環境變數

在專案根目錄下建立 .env 檔案，內容如下（請依照實際情況填寫）：

KINTONE_BASE_URL=https://example.cybozu.com
KINTONE_USERNAME=your_username
KINTONE_PASSWORD=your_password

Step 5：設定 package.json 指令

在 package.json 中新增以下腳本指令：

"scripts": {
  "build": "webpack --mode production",
  "develop": "webpack --mode development --watch",
  "upload": "source .env && kintone-plugin-uploader dist/plugin.zip --watch --base-url $KINTONE_BASE_URL --username $KINTONE_USERNAME --password $KINTONE_PASSWORD --waiting-dialog-ms 3000",
  "start": "npm-run-all --parallel develop upload"
}

完成上述步驟後，整個專案的資料夾結構應該會長得像這樣：

demo-plugin/                 
├── dist/                    // 儲存私鑰與打包好的 plugin.zip（執行後產生）
│   └── private.ppk          // 外掛簽署所需的私鑰
│   └── plugin.zip           // 打包完成後的外掛檔案
├── plugin/                  // 實際被打包的外掛內容
│   ├── html/                // 外掛設定畫面的 HTML 結構
│   │   └── config.html
│   ├── image/               // 外掛圖示等靜態資源
│   │   └── icon.png
│   └── manifest.json        // 外掛的設定檔
├── src/                     // 原始碼資料夾，僅放 JS 檔
│   └── js/
│       ├── config.js        // 外掛設定畫面邏輯
│       └── customize.js     // 反映至應用程式的邏輯
├── .env                     // 儲存 kintone 登入資訊的環境變數檔
├── package.json             // 管理套件與 npm scripts
└── webpack.config.js        // webpack 設定檔

Step 6：啟動開發流程

當以上設定完成後，只需一行指令即可進入即時開發模式：

npm start

此時將會同時執行以下兩個任務：

• webpack 進入監聽模式，當原始 JS 檔案有變更時會自動重新打包，並將結果輸出至 plugin/js 資料夾。
• kintone-plugin-uploader 自動上傳打包好的外掛 zip 至 kintone。

啟動即時開發模式後，我們可以進入 kintone 的外掛設定畫面，嘗試修改 src/js/config.js 來測試調整後的開發環境是否正常運作。

將 config.js 修改如下，新增一段程式碼，讓 Plugin ID 以紅色文字顯示：

((PLUGIN_ID) => {
  'use strict'

  const container = document.querySelector('#plugin-setting-container')
  
  const pluginIdText = document.createElement('p')
  pluginIdText.textContent = `Plugin ID: ${PLUGIN_ID}`
  pluginIdText.style.color = 'red' // 加上這段，將文字顏色改為紅色

  container.appendChild(pluginIdText)
  
})(kintone.$PLUGIN_ID)

回到外掛設定畫面並重新整理，應該就能看到 Plugin ID 變成紅色文字，表示開發環境設定成功！

以上就完成了以 webpack-plugin-kintone-plugin 為基礎的開發環境建置。透過 webpack 的打包與即時監聽功能，以及 plugin-uploader 的自動上傳功能，每當我們修改並儲存程式碼時，系統就會自動重新打包並上傳外掛，大幅減少手動操作的時間與步驟。

有了這樣的開發環境後，接下來就可以更專注地設計與實作外掛的設定畫面功能了！