kintoneのカスタマイズ効率をあげよう5 – webpackのmodeオプション

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": {
    "ws": "ws --https --cert ../localhost+2.pem --key ../localhost+2-key.pem",
    "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

その6に続く

kintoneのカスタマイズ効率をあげよう6 – 即時関数とStrictモード

この記事を書いた人