kintoneプラグイン開発環境構築メモ

asdf plugin-update --all
asdf install nodejs latest
asdf global nodejs latest

npm install -g @kintone/create-plugin
create-kintone-plugin <plugin_name>

cd <project_name>
git init

asdf local nodejs latest  
node --version
#=> v21.6.0

npm install --save-dev @kintone/webpack-plugin-kintone-plugin webpack webpack-cli

mkdir plugin

mv src/manifest.json plugin/

touch webpack.config.js

const path = require('path');
const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');

module.exports = {
  // webpack でバンドルする js のファイルを指定する
  entry: {
    desktop: './src/js/desktop.js',
    // mobile: './src/js/mobile.js',
    config: './src/js/config.js',
  },
  // webpack でバンドルしたファイルが出力する先を指定する
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js',
  },
  // プラグインのパッケージングに必要なファイルのパスを設定する
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/plugin.zip'
    }),
  ],
};

  "scripts": {
-   "start": "node scripts/npm-start.js",
-   "develop": "npm run build -- --watch",
-   "build": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip src",
+   "start": "npm run develop",
+   "develop": "webpack --mode development --watch",
+   "build": "webpack --mode production",
    "lint": "eslint src",
    "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
  },

mv src/css plugin/
mv src/html plugin/
mv src/image plugin/

npm run build

touch .env

KINTONE_BASE_URL=<kintoneのURL>
KINTONE_USERNAME=<ログイン名>
KINTONE_PASSWORD=<パスワード>

npm install --save-dev dotenv-cli

  "scripts": {
    "build": "webpack --mode production",
    "develop": "webpack --mode development --watch",
    "start": "npm run develop",
    "lint": "eslint src",
-   "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
+   "upload": "dotenv -- kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
  },

npm run upload

npm install --save-dev tailwindcss daisyui

npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./plugin/html/*.html'],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui')
  ],
  darkMode: 'class',
  daisyui: {
    themes: ['light'],
  }
}

mkdir -p src/css
touch src/css/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

  ...
  entry: {
  ...
+   css: './src/css/index.css',
  },
  ...
+ module: {
+   rules: [
+     {
+       test: /\.css$/,
+       use: ['css-loader', 'postcss-loader']
+     },
+   ]
+ },
  ...

npm install --save-dev css-minimizer-webpack-plugin mini-css-extract-plugin webpack-remove-empty-scripts

...
  const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');
+ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+ const WebpackRemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

  module.exports = {
    entry: {
-     desktop: './src/js/desktop.js',
-     // mobile: './src/js/mobile.js',
-     config: './src/js/config.js',
-     css: './src/css/index.css',
+     'js/desktop': './src/js/desktop.js',
+     // 'js/mobile': './src/js/mobile.js',
+     'js/config': './src/js/config.js',
+     'css/index': './src/css/index.css',
    },
    output: {
-     path: path.resolve(__dirname, 'plugin', 'js'),
+     path: path.resolve(__dirname, 'plugin'),
      filename: '[name].js',
    },
    plugins: [
      ...
+     new MiniCssExtractPlugin({
+       filename: '[name].css'
+     }),
+     new WebpackRemoveEmptyScriptsPlugin(),
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
-         use: ['css-loader', 'postcss-loader']
+         use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
        },
      ],
    },
+   optimization: {
+     minimizer: [new CssMinimizerPlugin()],
+   },
  };

npm install --save-dev css-loader postcss-loader autoprefixer

touch .gitignore

/node_modules/
/.env
/plugin/js/*
!/plugin/js/.gitkeep
/plugin/css/index.css
/private.ppk

npm install vue

npm install --save-dev vue-loader vue-template-compiler

  const WebpackRemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+ const {VueLoaderPlugin} = require('vue-loader');
+ const webpack = require('webpack');

  module.exports = {
    ...
    plugins: [
      ...
      new WebpackRemoveEmptyScriptsPlugin(),
+     new VueLoaderPlugin(),
+     new webpack.DefinePlugin({
+       __VUE_OPTIONS_API__: false,
+       __VUE_PROD_DEVTOOLS__: true
+     }),
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['css-loader', 'postcss-loader']
        },
+       {
+         test: /\.vue$/,
+         loader: 'vue-loader'
+       },
      ],
    },
  }

  /** @type {import('tailwindcss').Config} */
  module.exports = {
-   content: ['./plugin/html/*.html'],
+   content: ['./plugin/**/*.{html,js,vue}'],
    ...
  }

  {
    ...
    "desktop": {
      "js": [
-       "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
        "js/desktop.js"
      ],
      "css": [
-       "css/51-modern-default.css",
        "css/desktop.css"
      ]
    },
    "icon": "image/icon.png",
    "config": {
      "html": "html/config.html",
      "js": [
-       "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
        "js/config.js"
      ],
      "css": [
-       "css/51-modern-default.css",
-       "css/config.css"
+       "css/index.css"
      ],
      ...
    },
    ...
  }

npm install --save-dev @kintone/dts-gen