用webpack-plugin-kintone-plugin打包插件文件

aki • 发表于：2019年09月20日 12:47:28 • 更新于：2024年06月03日 14:16:12

Index

概要

为了能更加方便地开发kintone的插件，插件开发辅助工具群发布了！

本次就其中的webpack-plugin-kintone-plugin进行说明。

※关于其他工具请参考此处。

所谓webpack-plugin-kintone-plugin

是和webpack一起运行plugin-packer的CLI工具。关于plugin-packer，请参考此文档。

※ 此工具主要面向希望使用webpack打包插件文件的人员。

可支持npm，便于在Windows/macOS/Linux等环境下运行。

代码发布在GitHub上。

※ 使用此工具需要安装Node，其版本要求请参考仓库package.json下的engines属性。
例如：engines下注明如下时，表示需要Node.js版本10以上。

"engines": {
  "node": ">=10"
 },

安装方法

在项目的目录下安装webpack-plugin-kintone-plugin和必要的库。 webpack是webpack本身，webpack-cli是为了能够使用webpack命令的包。
※ webpack包版本不得低于4。

# 安装webpack-plugin-kintone-plugin   
$ npm install --save-dev @kintone/webpack-plugin-kintone-plugin    
# 安装webpack和webpack-cli    
$ npm install --save-dev webpack webpack-cli  
  
# 另外，执行这些命令可以批量安装    
$ npm install --save-dev @kintone/webpack-plugin-kintone-plugin webpack webpack-cli

执行这些命令，可以安装webpack-plugin-kintone-plugin和webpack、webpack-cli。

※ webpack-plugin-kintone-plugin 里包含了 plugin-packer，无需另外安装plugin-packer。

准备

  1. 使用create-plugin创建插件的模板。关于create-plugin请参考这里。

  2. 准备好插件所需的所有文件。
    本文的插件范例中所需的文件是如下目录结构的各文件。
    关于文件内容和目录结构请参考此篇文档 。
    0015f03fb18bff16592702c8f6596b8

要执行webpack-plugin-kintone-plugin，需要创建或修改以下3个文件。

  • manifest.json

  • webpack.config.js

  • package.json

请根据如下创建/修改。

manifest.json

是插件打包用的设置文件。

config, desktop, mobile的js文件的路径为用webpack生成的js文件路径（js/xxx.js）※。

※webpack生成的js文件的路径在webpack.config.js内的output里指定。
本次输出到"plugin/js/"下。

{
  "manifest_version": 1,
  "version": 1,
  "type": "APP",
  "name": {
    "en": "kintone-plugin-webpack-example"
  },
  "description": {
    "en": "kintone-plugin-webpack-example"
  },
  "icon": "image/icon.png",
  "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"
    ]
  },
  "mobile": {
    "js": [
      "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
      "js/mobile.js"
    ],
    "css": [
      "css/mobile.css"
    ]
  },
  "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"
    ],
    "required_params": [
      "message"
    ]
  }
}

webpack.config.js

用于webpack的设置文件。

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

module.exports = {
  entry: {
    desktop: './src/desktop.js',
    mobile: './src/mobile.js',
    config: './src/config.js'
  },
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js'
  },
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/plugin.zip'
    })
  ]
};

package.json

是管理npm库的设置文件。各库的版本请根据自身的环境做相应修改。

下面例子中，为了能够在webpack上编译，要添加scripts的develop和build。

{
  "name": "kintone-plugin-webpack-example",
  "version": "0.1.0",
  "scripts": {
    "start": "node scripts/npm-start.js",
    "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000",
    "develop": "webpack --mode development --watch",
    "build": "webpack --mode production",
    "lint": "eslint src"
  },
  "devDependencies": {
    "@kintone/plugin-packer": "^1.0.1",
    "@kintone/plugin-uploader": "^2.2.0",
    "@kintone/webpack-plugin-kintone-plugin": "^1.0.4",
    "eslint": "^4.19.1",
    "eslint-config-kintone": "^1.3.0",
    "npm-run-all": "^4.1.3",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

基本使用方法

执行以下命令，即可通过webpack在“插件目录/dist/”下生成plugin.zip。

$ npm run build    

# 可直接执行    
# $ node_modules/.bin/webpack --mode production

选项功能

更改路径

webpack.config.js的entry部分和plugins部分的路径请根据自身的环境进行修改。

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

module.exports = {
  // 用webpack打包的文件列表
  entry: {
    desktop: './src/desktop.js',
    mobile: './src/mobile.js',
    config: './src/config.js'
  },
  // 在plugin/js下输出用webpack打包的文件
  output: {
    path: path.resolve(__dirname, "plugin", "js"),
    filename: '[name].js'
  },
  plugins: [
    // kintone插件的各种设置
    new KintonePlugin({
      manifestJSONPath: './plugin/manifest.json', // 您自身的manifest.json路径
      privateKeyPath: './private.ppk', // 您自身的密钥的路径和文件名
      pluginZipPath: './dist/plugin.zip' // 生成的插件名
    })
  ]
};

另外，生成的插件文件的文件名也可以使用插件ID和manifest.json内的version。

plugins: [
  new KintonePlugin({
    manifestJSONPath: './manifest.json',
    privateKeyPath: './private.ppk',
    pluginZipPath: (id, manifest) => `${id}.${manifest.version}.plugin.zip`
  })
];

自动上传 + 文件监控

执行以下命令即可自动上传插件文件。原理跟plugin-uploader一样。

关于plugin-uploader请参考此文档。

$ npm start

之后进入监视模式，在这种情况下如果更改了代码，会自动通过webpack根据资源包打包插件的zip文件。

最后

有了webpack-plugin-kintone-plugin，使用webpack打包插件时就更加方便了吧。

webpack的功能，除了js以外，还可以打包图片文件等，请务必尝试一下哦。

※插件的文件大小上限为100MB。
请注意打包后的文件不能太大。

注意事项

根据许可协议，可对代码进行更改、再发布及用于商业目的。

    最多浏览的文档