kintoneアプリで複数jsをwebpackでバンドルする

kintoneアプリで複数jsをwebpackでバンドルする

共通ファイルはcommon.js、イベントを記述するファイルはevent.jsというように複数ファイルに分割して開発する場合、common.jsに定義した関数をevent.jsで実行するいくつか方法があります。

• グローバル変数に関数を定義しておく
• webpackでバンドルする

webpackでバンドルする方が一般的のようなので今回それを試してみたいと思います。

プロジェクト作成

npm init -y
npm i -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env core-js@3
touch webpack.config.js

webpack.config.js(commonJS)

const path = require('path');

module.exports = {
  entry: {
      'bundle': './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: 'usage',
                  corejs: 3
                }
              ]
            ]
          }
        }
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  externals: {
    jquery: 'jQuery'
  }
};

npm scripts

package.jsonのnpm scritpsを以下のようにします。

"scripts": {
  "dev": "webpack --mode development",
  "prod": "webpack --mode production"
},

プロジェクト構成

.
├── package-lock.json
├── package.json
├── src
│   ├── common.js ・・・共通モジュール
│   └── index.js  ・・・エントリポイント
└── webpack.config.js

バンドル

npm scriptsを実行してバンドルします。

npm run dev

dist\bundle.jsが作成されますので、このファイルをkintoneアプリにアップロードすればOKです。

参考サイト

webpack入門〜Babel、Polyfillを導入してkintoneカスタマイズを効率化する

webpackとBabel、Polyfillを使ってkintoneカスタマイズを行う方法を紹介します。

cybozu.dev

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^