kintoneの開発環境を考える（webpack編）

はじめに

前回、愛用していたJSEdit for kintoneプラグインのメリット・デメリットを整理した。
規模が小さい間は問題ないが、規模が大きくなるにつれ、
「各JavaScriptをモジュール化して開発したい」という願望が出てきそう。
というか出てきた。
後述するwebpackを利用する方法で解決できそうなので、まとめてみた。
ただし、webpack自体の説明や利用方法は、後述の参考ページに詳しく説明されている為、
webpackを利用したkintoneの開発環境にフォーカスして記載する。
・・・かなり自分用のメモになりそう。

必要なツール

• webpack本体
• webpack
  ver4から本体に加えて、webpack-cliが必須となった。
• webpack-cli

下記は任意

• kintone-customize-uploader
  kintoneアプリへのJavaScript／CSSアップロードをCLIから行うツール
• eslint
  JavaScriptのLinter
• eslint-config-kintone
  eslintのkintone向けのconfig

ディレクトリ構成

下記の構成が良さそう。
hogeProject直下には共通で使用するライブラリ（webpack,ESLint等）をインストールする。
各アプリのディレクトリ内に、各アプリに適用するJavaScriptが依存するライブラリ（jQuery等）をインストールする。
webpack、kintone-customize-uploaderはhogeProject直下から、対象アプリディレクトリ内のconfigやmanifestを指定して実行する。

hogeProject ***************************プロジェクト毎のルートディレクトリ
├ apps
│ ├ fugaApp_1 ***********************アプリ毎のルートディレクトリ
│ │ ├ src **************************ソースディレクトリ
│ │ │ ├ main.js
│ │ │ └ sub.js
│ │ ├ dist *************************バンドル後JSの格納先
│ │ │ └ bundle.js
│ │ ├ node_modules *****************jQuery等の必要ライブラリ
│ │ ├ webpack.config.js
│ │ ├ deploy-manifest.json
│ │ ├ package.json
│ │ └ package-lock.json
│ ├ fugaApp_2
│ │ ├ src
│ │ │ ├ main.js
│ │ │ └ sub.js
│ │ ├ dist
│ │ │ └ bundle.js
│ │ ├ node_modules
│ │ ├ webpack.config.js
│ │ ├ deploy-manifest.json
│ │ ├ package.json
│ │ └ package-lock.json
├ node_modules
├ .eslintrn.json
├ package.json
└ package-lock.json

webpack.config.jsの中身

config内の相対パスは、実行ディレクトリ（hogeProject直下）ではなく、
webpack.config.jsが存在するディレクトリ（fugaApp_1 または fugaApp_2）からの相対になるみたい。

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "src/js/main.js"),
    mode: "development",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
};

参考

webpackを理解するにあたり、下記を参考にした。

webpack自体の説明
webpack 4 入門

webpackを利用したkinotneの開発についての説明

webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏