webpack-plugin-kintone-plugin

連結已複製

關於 webpack-plugin-kintone-plugin

連結已複製

webpack-plugin-kintone-plugin是一個CLI工具，支援使用webpack 創建kintone外掛程式檔。
webpack
您可以使用 webpack 壓縮檔大小或捆綁第三方庫。

它以 npm 包的形式提供，因此可以在 Windows/macOS/Linux 環境中使用。

GitHub

連結已複製

https://github.com/kintone/js-sdk/tree/main/packages/webpack-plugin-kintone-plugin

授權

連結已複製

MIT License

文件

連結已複製

https://github.com/kintone/js-sdk/blob/main/packages/webpack-plugin-kintone-plugin/README.md

下準備

連結已複製

要運行 webpack-plugin-kintone-plugin，需要 Node.js 和 npm（一個包管理工具）。
安裝 Node.js 時，會自動安裝 npm。

Node.js從官方網站下載安裝程式。
Node.js官方網站
對於所需的 Node.js 版本，請檢查以下存儲庫中的 engines 屬性。
packages/webpack-plugin-kintone-plugin/package.json
例如，以下要求Node.js版本 14 或更高版本：
1 2 3

"engines": { "node": ">=14" },
運行下載的安裝程式並按照畫面上的說明進行設置。

Quickstart

連結已複製

本節將對使用webpack-plugin-kintone-plugin的外掛程式文件的創建方法進行說明。

Step1：準備外掛程式檔

連結已複製

為要打包到外掛程式中的外掛程式準備自定義檔。
本快速入門以以下的資料夾・文件構成為例進行說明。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


sample_plugin_project
├── css/
│   ├── 51-modern-default.css
│   ├── config.css
│   ├── desktop.css
│   └── mobile.css
├── html/
│   └── config.html
├── image/
│   └── icon.png
├── js/
│   ├── config.js
│   ├── desktop.js
│   └── mobile.js
├── manifest.json
├── node_modules/
├── package-lock.json
├── package.json
├── private.ppk
└── scripts/
    └── npm-start.js

自行準備文件進行打包時，請按照「準備外掛程式所需的檔」中介紹的文件構成進行準備。

Step2：安裝所需的套件

連結已複製

在外掛程式檔案目錄下，安裝以下內容：

webpack-plugin-kintone-plugin
plugin-uploader
npm-run-all
webpack

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 瀏覽到外掛程式檔目錄
cd sample_plugin_project

# 安裝 webpack-plugin-kintone-plugin
$ npm install --save-dev @kintone/webpack-plugin-kintone-plugin

# 安裝kintone-plugin-uploader
$ npm install --save-dev @kintone/plugin-uploader

# 安裝 npm-run-all
$ npm install --save-dev npm-run-all

# 安裝 webpack 和 webpack-cli
$ npm install --save-dev webpack webpack-cli

警告

2026年2月的定期維護中，cli-kintone新增了與plugin-uploader同等的功能。
此外，plugin-uploader將於2026年8月的定期維護中終止維護。
今後請使用cli-kintone。詳細資訊請參閱移轉步驟。

Step3：為構建檔案創建目錄

連結已複製

創建一個「plugin」作為目錄來存儲使用 webpack 構建的檔。
「plugin」中的檔打包在kintone外掛程式檔中。

1

mkdir plugin

Step4：創建並修改webpack-plugin-kintone-plugin的配置檔

連結已複製

為了運行webpack-plugin-kintone-plugin，需要創建並修改以下三個檔。

manifest.json
webpack.config.js
package.json

manifest.json

這是用於打包外掛程式的配置檔。
將manifest.json移動到Step3中創建的「plugin」目錄。

1

mv manifest.json plugin/

webpack.config.js

webpack 配置檔。
在外掛程式檔目錄下直接創建一個「webpack.config.js」，其中包含以下內容。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


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

module.exports = {
  // 指定要與 webpack 捆綁的 JS 檔
  entry: {
    desktop: './js/desktop.js',
    mobile: './js/mobile.js',
    config: './js/config.js',
  },
  // 指定使用 webpack 輸出的捆綁文件的目標
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js',
  },
  // 設置打包外掛程式所需的檔案路徑
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/plugin.zip'
    }),
  ],
};

您可以在 manifest.json 中使用外掛程式 ID 和版本作為生成的外掛程式檔的檔案名。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// ...
module.exports = {
  // ...
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: (id, manifest) => `${id}.${manifest.version}.plugin.zip`
    })
  ]
};

package.json

此文件用於管理 npm 包。
修改package.json中的script，如下所示：

1
2
3
4
5
6
7


  "scripts": {
    "build": "webpack --mode production",
    "develop": "webpack --mode development --watch",
    "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000",
    "lint": "eslint src",
    "start": "node scripts/npm-start.js"
  },

Step5：將非 js 檔移動到「plugin」

連結已複製

在這種情況下，我們不會將 css、HTML 或圖像檔與 webpack 捆綁在一起。
因此，請移動到「plugin」目錄，以便您可以打包它。

1
2
3


mv css plugin/
mv html plugin/
mv image plugin/

如果完成到Step5，「sample_plugin_project」的目錄結構如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


sample_plugin_project
├── node_modules/
├── package-lock.json
├── package.json # 在Step4中編輯
├── plugin/
│   ├── css/ # 在Step5 移動
│   │   ├── 51-modern-default.css
│   │   ├── config.css
│   │   ├── desktop.css
│   │   └── mobile.css
│   ├── html/ # 在Step5 移動
│   │   └── config.html
│   ├── image/ # 在Step5 移動
│   │   └── icon.png
│   └── manifest.json # 在Step4 移動
├── private.ppk
├── scripts/
│   └── npm-start.js
├── src/
│   └── js/
│       ├── config.js
│       ├── desktop.js
│       └── mobile.js
└── webpack.config.js # 在Step4 中創建

Step6：打包到外掛程式檔中

連結已複製

執行以下命令：

1

pnpm run build

在「dist」目錄下，外掛程式檔生成為「plugin.zip」。

1
2
3
4


├── dist
│ └── plugin.zip # 生成的外掛程式檔
├── node_modules
├── # 省略

之後，您可將創建的外掛程式添加到kintone中，並在kintone應用中使用。
在kintone中添加外掛程式有兩種方法：

在畫面上操作的方法：新增/移除外掛程式（kintone系統管理）
如何使用plugin-uploader：上傳外掛程式： plugin-uploader

補充

連結已複製

監控檔並自動添加外掛程式到打包/kintone

連結已複製

您可以執行以下命令，在修改外掛程式檔時自動將原始程式碼打包並上傳到外掛程式檔中。

在此命令中，plugin-uploader 正在運行。
有關 plugin-uploader 的更多資訊，請參閱上傳外掛程式：plugin-uploader。
上傳外掛程式：plugin-uploader

1

pnpm start

警告

2026年2月的定期維護中，cli-kintone新增了與plugin-uploader同等的功能。
此外，plugin-uploader將於2026年8月的定期維護中終止維護。
上述pnpm start使用了plugin-uploader的功能。
今後請使用cli-kintone。詳細資訊請參閱移轉步驟。

修訂記錄

連結已複製

查看CHANGELOG中查看webpack-plugin-kintone-plugin 的更新日誌。
CHANGELOG

本文介紹的示例代碼已經過kintone的2022年5月版本和@kintone/webpack-plugin-kintone-plugin v6.0.0的測試。

kintone API

SDK & Tools