⛅
TypeScript + Reactでkintoneプラグインを開発できるテンプレートを作成しました
今までいくつかプラグインを公開しましたが、今後もう少し効率よく開発を行いたいと思い、テンプレートを作成しました。
ベースは@kintone/create-pluginです。これのおかげでほんとに開発が楽になりました。
これにプラグインを作る上で頻繁に行うディレクトリ構成であったり、共通処理(プラグイン設定を保存するボタンなど)を追加してます。
初期状態でこんな感じになります。
また、最初からプラグインの設定情報を状態に持たせているので、設定の自動保存も簡単に実装できると思います。
仕様
TypeScript での記述を前提
モジュールを最小限に抑えるため、初期状態では ts ファイルのみコンパイルするようにしています。Javascript を使用する場合は、webpack の設定を変更する必要があります。
Webpack
Webpack は開発用と本番用の２つにファイルを分けています。プラグインの圧縮ファイルも、別の名前で出力されます。
npm スクリプトの解説
初期設定
npm run init
上記コマンドを実行し、プラグインの初期設定を行います。
dist フォルダにプラグインの zip ファイル、ルートディレクトリに private.ppk という名前で秘密鍵が作成されます。この private.ppk は .gitignore に追加しているので、Private で使用する場合は .gitignore から削除するか、リポジトリとは別の形で保管してください。
ビルドとアップロード
npm run start
上記コマンドでファイルの修正を監視し、変更があればコンパイル・アップロードします。コンソールにログがドバっと出ますが、更新するとアップロード先の URL 入力待ちになると思います。
本番用ビルド
npm run start
実際にリリースするためのプラグインデータを出力します。
ライセンスは MIT です。よろしければご活用ください 🍀
Discussion