Photo by Cookie the Pom on Unsplash
更新履歴
- 2020/10/18 webpack5に対応
はじめに
kintoneのカスタマイズ効率をあげよう4 – IE11対応の続きです。
webpackのmodeにはnone、development、productionの3つを指定できます。今回はdevelopmentとproductionの違いを確認します。
index.tsはこれまでのindex.tsと同じ、以下の内容で確認します。
// 略
kintone.events.on("app.record.index.show", (event: IndexEvent) => {
console.log(Object.values(event));
});
// 略developmentモード
まずはdevelopmentの動作を確認します。以下のコマンドを実行します。
> npx webpack --mode=development生成されたindex.jsを確認するとプログラムがeval()で実行されています。
// 略
/*!**********************!*\
!*** ./src/index.ts ***!
\**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_object_values__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.object.values */ \"./node_modules/core-js/modules/es.object.values.js\");\n/* harmony import */ var core_js_modules_es_object_values__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_values__WEBPACK_IMPORTED_MODULE_0__);\n\n\n(function () {\n \"use strict\";\n\n kintone.events.on(\"app.record.index.show\", function (event) {\n console.log(Object.values(event));\n });\n kintone.events.on(\"app.record.detail.show\", function (event) {\n console.log(Object.values(event));\n });\n})();\n\n//# sourceURL=webpack:///./src/index.ts?");
/***/ })
// 略ポイントはeval()の最後が「sourceURL=webpack://kintone-customize-template/./src/index.ts?」になっていることです。
Google Chromeの開発者コンソールを見るとObject.values(event)の結果が表示され、その出力元はindex.tsの10行目と表示されています。このindex.ts:10をクリックします。
クリックすると、index.tsが表示され、出力元にカーソルが移動します。左側のツリーにはwebpackのファイル（kintone-customize-template配下）が展開されていることがわかります。
productionモード
次はproductionの動作を確認します。以下のコマンドを実行します。
> npx webpack --mode=production生成されたindex.jsを確認すると短い変数名に置換されています。また、改行が削除されて1行のファイルになっています。
!function(t){var n={};function r(e){if(n[e])return n[e].exports;var o=n[e]={i:e,l:!1,// 以下略開発者コンソールを見るとObject.values(event)の結果が表示され、その出力元はindex.jsの1行目と表示されています。このindex.js:1をクリックします。
クリックすると、index.jsが表示され、出力元にカーソルが移動します。
developmentとproductionの違い
このようにdevelopmentはデバッグしやすく、productionはデバッグしにくいということがわかりました。また、developmentで生成されたindex.jsは53KB、productionで生成されたindex.jsは9KBでした。
つまり、開発中はdevelopment、リリース時はproduction、と使い分けるのがよさそうです。
webpackのコマンドを設定
ではこのwebpackのコマンドを簡単に実行できるようにpackage.jsonを更新します。
"scripts": {
"dev": "kintone-customize-uploader manifest.dev.json && webpack --mode=development --watch",
"prod": "webpack --mode=production && kintone-customize-uploader manifest.prod.json",
},開発中は先にアップロードして、webpackをwatchオプションで実行します。watchオプションを指定して実行するとindex.tsファイルを更新するたびにwebpackが実行されます。
リリースはwebpack実行後にアップロードを実行します。
ここまでの設定
ここまでの設定は以下にあります。
https://github.com/potaracom/kintone-customize-template4