はじめに
kintoneのカスタマイズ効率をあげようシリーズでwebpackを利用しました。
potara.netwebpackにはもう1つ大きなメリットがあるのでそれを紹介します。
webpackのメリット
kintoneでは1つのアプリにプラグインを複数適用することがあります。このとき複数プラグインで同じライブラリ、異なるバージョンを利用している場合にエラーが発生する場合があります。
webpackを利用することでこのエラーを回避できます。
エラー発生の原因
まずはエラー発生の原因を確認します。よく話題に上がるSweetAlert2を利用します。（SweetAlert2に問題があるわけではありません）
SweetAlert2ではv8.0.0でswal()関数が廃止されました。まとめると各バージョンで利用できる関数は以下の通りです。これをそれぞれのプラグインで利用します。
| SweetAlert2のバージョン | swal() | Swal.fire() | |
| プラグイン1 | 7.33.1 | ○ | ○ |
| プラグイン2 | 8.0.0 | × | ○ |
プラグイン1、2の設定
プラグイン1の設定
プラグインの設定ファイル（manifest.json）にはv7.33.1を利用します。
"desktop": {
"js": [
"https://cdn.jsdelivr.net/npm/sweetalert2@7.33.1/dist/sweetalert2.all.min.js",
"js/desktop.js"
],
"css": []
},詳細画面でswal()を利用します。
(() => {
"use strict";
kintone.events.on("app.record.detail.show", (event) => {
swal("Any fool can use a computer");
});
})();プラグイン2の設定
プラグインの設定ファイル（manifest.json）にはv8.0.0を利用します。
"desktop": {
"js": [
"https://cdn.jsdelivr.net/npm/sweetalert2@8.0.0/dist/sweetalert2.all.min.js",
"js/desktop.js"
],
"css": []
},一覧画面でSwal.fire()を利用します。
(() => {
"use strict";
kintone.events.on("app.record.index.show", (event) => {
Swal.fire("Any fool can use a computer");
});
})();プラグイン1, 2の追加
プラグイン2を先に追加します。（下からプラグイン2、プラグイン1と並ぶようにします）
アプリへの適用ではなく、kintoneシステム管理 > プラグインへの追加です。
動作確認（webpackなし）
アプリの詳細画面を開くと以下のエラーが発生します。
Uncaught TypeError: Cannot read property ‘constructor’ of undefined at Se (sweetalert2.all.min.js:1)
これはプラグイン2のSweetAlert@8.0.0が後に適用されることで、プラグイン1のSweetAlert@7.33.1を上書きしてしまうことが原因です。つまり、一覧画面でも詳細画面でもSweetAlert@8.0.0が利用され、swal()関数が未定義というエラーが発生します。
プラグイン1、2にwebpackを利用
ここからはwebpackを利用すればエラーが発生しなくなることを確認します。
プラグイン1の設定
v7.33.1をインストールします。
> npm install --save sweetalert2@7.33.1desktop2.tsを作成します。
import Swal from "sweetalert2";
kintone.events.on("app.record.detail.show", (event) => {
Swal("Any fool can use a computer");
});プラグイン2の設定
v8.0.0をインストールします。
> npm install --save sweetalert2@8.0.0desktop2.tsを作成します。
import Swal from "sweetalert2";
kintone.events.on("app.record.index.show", (event) => {
Swal.fire("Any fool can use a computer");
});プラグイン1、2共通の設定
Babelとwebpackをインストールします。
> npm install --save-dev @babel/core @babel/cli @babel/preset-env core-js
> npm install --save-dev typescript @babel/preset-typescript
> npm install --save-dev webpack webpack-cli babel-loaderBabelの設定ファイル（.babelrc.js）を作成します。
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
ie: "11",
},
useBuiltIns: "usage",
corejs: { version: 3 },
},
],
"@babel/preset-typescript",
],
};webpackの設定ファイル（webpack.config.js）を作成します。
const path = require("path");
module.exports = {
entry: "./src/js/desktop2.ts",
output: {
path: path.resolve(__dirname),
filename: "src/js/desktop2.js",
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
target: ["web", "es5"],
};desktop2.tsをトランスパイルします。
> npx webpack --mode=productionプラグインの設定ファイル（manifest.json）にはdesktop2.jsのみを利用します。
"desktop": {
"js": ["js/desktop2.js"],
"css": []
},動作確認（webpackあり）
アプリの一覧画面を開いても、詳細画面を開いてもエラーは発生しないことが確認できます。
まとめ
まとめると以下のとおりです。
- 複数プラグインで同じライブラリ、異なるバージョンを利用している場合にエラーが発生する場合がある
- エラーが発生する原因は後に適用されたライブラリが先に適用されたライブラリを上書きするから
- 先に適用されたライブラリにのみ存在する関数などを利用する場合にエラーが発生する
- webpackを利用すれば即時関数内にライブラリも含められるのでエラーが発生しない
仮にエラーが発生しない場合であっても利用するライブラリのバージョンが変わってしまいます。想定しない動作になることも考えられるのでwebpackを利用したほうがよいと考えています。