webpack-plugin-kintone-pluginを使ってプラグインファイルをパッケージングしよう！ – cybozu developer network

Index

はじめに
webpack-plugin-kintone-pluginとは
インストール方法
準備
基本の使い方
オプション機能
おわりに
注意事項

はじめに

kintoneのプラグイン開発をもっと簡単にできるようにしたプラグイン開発支援ツール群を公開しました。

今回はその中の webpack-plugin-kintone-plugin について説明します。

※その他のツールについてはこちら。

webpack-plugin-kintone-pluginとは

webpack と一緒に plugin-packer を動かすための CLI ツールです。plugin-packer についてはこちらの記事をご覧ください。

※ webpack を使ってプラグインファイルをパッケージングしたい人向けのツールとなります。

npmに対応しているため、Windows/macOS/Linuxどの環境でも簡単に実行することができます。

ソースコードはGitHubに公開しています。

※ こちらのツールの利用に必要な Node.js のバージョンは、リポジトリの package.json にある engines プロパティをご参照ください。
例：次の記載の場合、Node.js のバージョンは 10 以上が必要です。

"engines": {
  "node": ">=10"
},

インストール方法

プロジェクトディレクトリの直下で、webpack-plugin-kintone-plugin と必要なライブラリをインストールします。
webpack は webpack の本体、webpack-cli は webpack コマンドを利用可能にするためのパッケージです。
※ webpack のバージョンは 4以上である必要があります。

こちらのコマンドを実行することで、webpack-plugin-kintone-pluginとwebpack、webpack-cliをインストールできます。

※ webpack-plugin-kintone-plugin は plugin-packer を内包しているため、別途 plugin-packer をインストールする必要はありません。

準備

create-plugin を使って、プラグインの雛形を作成します。create-plugin についてはこちらの記事をご覧ください。
プラグインに必要なファイルを揃えます。
この記事では、プラグインに必要なファイルは、下図のように配置するものとします。
ファイルの内容および配置についてはこちらの記事をご覧ください。

webpack-plugin-kintone-plugin を実行するために、以下の3ファイルを作成・修正します。

manifest.json
webpack.config.js
package.json

下記のように作成/修正してください。

manifest.json

プラグインパッケージング用の設定ファイルです。

config, desktop, mobile の jsファイルのパスは、webpack で生成される js ファイルのパス（js/xxx.js）※ を、manifest.json の位置からみた相対パスで指定します。

※ webpack で生成される js のパスは、webpack.config.js 内の output で指定しています。
今回は「plugin/js/」以下に出力します。

webpack.config.js

webpackを使うための設定ファイルです。

package.json

npmのライブラリの管理等を行うための設定ファイルです。各ライブラリのバージョンはご自身の環境に合わせて修正してください。

下記では、webpack を使ってビルドするよう、script の develop と build を追加しています。

基本の使い方

下記のコマンドを実行することで、dist 以下に webpackを使った plugin.zip が生成されます。

オプション機能

パスの変更

webpack.config.js の entry, plugins のパスは、ご自身の環境に合わせることができます。

また、生成されるプラグインファイルのファイル名にプラグイン ID と manifest.json 内の version を利用することもできます。

自動アップロード + ファイル監視

下記のコマンドを実行することで、プラグインファイルの自動アップロードが可能となります。仕組みは plugin-uploader と同じです。

plugin-uploader についてはこちらの記事をご覧ください。

その後、監視モードとなりソースが変更されると自動的にwebpackでバンドルからプラグインのzip作成まで行われます。

おわりに

webpack-plugin-kintone-plugin を使うことで、簡単に webpack を使ったプラグインのパッケージングができます。

webpack の機能として js 以外にも画像ファイルなどもまとめることができるのでぜひいろいろお試しください！

※プラグインのファイルサイズの上限は 100MB となっております。
バンドルによるファイルサイズの肥大化にはご注意ください。

注意事項

ソースコードの変更および再配布、商用利用等はライセンスに従ってご利用可能です。