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

Index

はじめに

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

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

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

webpack-plugin-kintone-pluginとは

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

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

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

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

※ こちらのツールを利用するには、Nodeのバージョンが6以上である必要があります。

インストール方法

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 をインストールする必要はありません。

準備

webpack-plugin-kintone-pluginを実行するためには、以下の4ファイルを作成/修正する必要があります。

• webpack.config.js
• package.json
• manifest.json
• private.ppk

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

webpack.config.js

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

package.json

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

下記では、scriptsのdevelopとbuildをwebpackを使ったものに書き換えています。

manifest.json

プラグインソースコードディレクトリ直下に配置するプラグインパッケージング用のファイルです。

jsファイルのパスをwebpackで生成するjsファイルのパス(js/dist/)に修正してください。

※jsファイルのパスはwebpack.config.js内のoutputのパスとなります。

private.ppk

プラグインの秘密鍵です。作成するためには plugin-packer 等を用いてパッケージングする必要があります。

基本の使い方

下記のコマンドを実行することで、「プラグインディレクトリ/dist/」下に webpackを使った plugin.zip が生成されます。

オプション機能

パスの変更

entry部分、plugins部分のパスは、ご自身の環境に合わせることができます。

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

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

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

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

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

おわりに

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

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

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

注意事項

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