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

2022.07.26

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です。

参考サイト

https://developer.cybozu.io/hc/ja/articles/360022880491-webpack%E5%85%A5%E9%96%80-Babel-Polyfill%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E5%BF%AB%E9%81%A9ES6%E3%83%A9%E3%82%A4%E3%83%95-
developer.cybozu.io

コメント

タイトルとURLをコピーしました