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 授權

文件

連結已複製

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

"engines": {

"node": ">=14" }, ```

運行下載的安裝程式並按照畫面上的說明進行設置。

Quickstart

連結已複製

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

Step1：準備外掛程式檔

連結已複製

為要打包到外掛程式中的外掛程式準備自定義檔。

本快速入門使用你在create-plugin 快速入門中創建的範本。

create-plugin 快速入門

如需自行打包檔，請按照kintone外掛程式開發流程中「準備外掛程式所需的檔」進行文件準備。
kintone外掛程式開發流程

create-plugin 快速入門創建的範本具有以下文件結構：

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


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

Step2：安裝所需的套件

連結已複製

直接在外掛程式文件目錄下安裝 webpack-plugin-kintone-plugin 和 webpack。

1
2
3
4
5
6
7
8


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

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

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

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

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

1

mv src/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: './src/js/desktop.js',
    // mobile: './src/js/mobile.js',
    config: './src/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": "npm run develop"
  },

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

連結已複製

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

1
2
3


mv src/css plugin/
mv src/html plugin/
mv src/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


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

Steo6：打包到外掛程式檔中

連結已複製

執行以下命令：

1

npm run build

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

1
2
3
4


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

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

如何從畫面執行此操作：添加/刪除外掛程式（系統管理）
如何使用plugin-uploader：上傳外掛程式： plugin-uploader

補充

連結已複製

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

連結已複製

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

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

1

npm start

修訂記錄

連結已複製

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

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

SDK & Tools