webpack-plugin-kintone-plugin

連結已複製

本頁面使用機器翻譯而成。
機器翻譯免責聲明

什麼是webpack-plugin-kintone-plugin？

連結已複製

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

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

GitHub

連結已複製

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

授權

連結已複製

麻省理工學院許可證

公文

連結已複製

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

下準備

連結已複製

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

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

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

Quickstart

連結已複製

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

步驟1：準備外掛程式檔

連結已複製

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

本快速入門使用你在 create-plugin 快速入門中創建的範本。
如需自行打包檔，請按照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

步驟2：安裝所需的套件

連結已複製

直接在外掛程式文件目錄下安裝 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

步驟3：為構建檔案創建目錄

連結已複製

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

1

mkdir plugin

步驟4：創建並修改webpack-plugin-kintone-plugin的配置檔

連結已複製

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

manifest.json
webpack.config.js
package.json

manifest.json

這是用於打包外掛程式的配置檔。
src/manifest.json 到步驟 3 中創建的"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"
  }

步驟5：將非 js 檔移動到「plugins」

連結已複製

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

1
2
3


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

如果轉到步驟 5，"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 # 在第 4 步中編輯
├── plugin
│   ├── css # 用 Step5 移動
│   │   ├── 51-modern-default.css
│   │   ├── config.css
│   │   └── desktop.css
│   ├── html # 使用 Step5 移動
│   │   └── config.html
│   ├── 圖片 # Move with Step5
│   │   └── icon.png
│   └── manifest.json # 跟著步驟4移動
├── private.ppk
├── scripts
│   └── npm-start.js
├── src
│   └── js
│       ├── config.js
│       └── desktop.js
└── webpack.config.js # 在步驟 4 中創建

步驟6：打包到外掛程式檔中

連結已複製

執行以下命令：

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 。

1

npm start

修訂記錄

連結已複製

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

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

SDK & Tools