使用create-plugin创建插件模板

aki发表于:2019年09月19日 09:26:51更新于:2020年09月09日 14:09:52

Index

概要

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

本次就其中之一的create-plugin进行说明。

※其他的工具请参考此处

所谓create-plugin

通过对话形式来创建kintone插件模板的CLI工具。

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

代码发布在GitHub

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

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

安装方法

安装create-plugin。

※ 这里以通过npm进行安装为例。

$ npm install -g @kintone/create-plugin

执行以上命令即可安装create-plugin。

基本使用方法

在dir_name 中输入要创建的目录名称,将自动创建目录。

$ create-kintone-plugin dir_name

本文在sample的目录名称下创建模板。

$ create-kintone-plugin sample   
 
 
Please answer some questions to create your Kintone plug-in project :)
Let's start!  

  
? Input your plug-in name in English [1-64chars] sample
? Input your plug-in description in English [1-200chars] sample
? Does your plug-in support Japanese? No
? Does your plug-in support Chinese? Yes
? Input your plug-in name in Chinese [1-64chars] (Optional) 
? Input your plug-in description in Chinese [1-200chars] (Optional)
? Input your home page url for English (Optional) 
? Input your home page url for Chinese (Optional)
? Does your plug-in support mobile views? No
? Would you like to use @kintone/plugin-uploader? Yes

将自动创建sample目录,并在该目录下生成插件模板的src目录/文件。

$ tree sample    
sample    
├── node_modules/../..    
├── package-lock.json    
├── package.json    
├── private.ppk    
├── scripts    
│   └── npm-start.js    
└── src    
    ├── css    
    │   ├── 51-modern-default.css    
    │   ├── config.css    
    │   └── desktop.css    
    ├── html    
    │   └── config.html    
    ├── image    
    │   └── icon.png    
    ├── js    
    │   ├── config.js    
    │   └── desktop.js    
    └── manifest.json

※ package-lock.json在npm5以上执行时自动生成。

详情

模板的详情

生成的模板 (src目录)其构成如下。各文件详情请参考此文档

image5.png

生成的插件内容

生成的插件模板,其功能是在记录列表页面上方显示任意文字。
要显示的文字可在插件的设置页面输入。

0015d842636d056837ad0fa9d2f1e27

插件的设置页面
0015d842649d95686801e2d7395cdd0

选项功能

该create-plugin除了可以创建模板之外,还有其他非常便利的功能。

使用ESLint进行代码检查

可以使用ESLint对JavaScript的代码进行检查。

# 移到刚才创建的目录下    
cd sample

# 执行代码检查    
$ npm run lint

自动打包 & 自动上传

做好后,在插件目录下执行以下代码即可做成插件zip文件。

# 移到创建好的目录下    
$ cd sample    

# 执行自动处理    
$ npm start

另外,在执行create-plugin时,如果选择了“使用@kintone/plugin-uploader”,将执行plugin-uploader。

需要kintone管理权限才可使用plugin-uploader。

・・・    

Scceeded: dist/plugin.zip    

# 用对话行书输入环境信息    
? Input your kintone subdomain (example.cybozu.cn): xxxxxx.cybozu.cn/
? Input your username: <user name>
? Input your password: <password>

> Open https://xxxxxx.cybozu.cn//login?saml=off
> Trying to log in...
> Navigate to https://xxxxxx.cybozu.cn//k/admin/system/plugin/
> Trying to upload dist/plugin.zip
> dist/plugin.zip has been uploaded!

之后进入监视模式,在这种情况下如果更改了代码,会自动再打包并上传到kintone。

※ 如要停止监视,用“ctrl + c”命令取消。

最后

就一个工具就可以完成插件的模板创建、代码检查、打包和上传一整套操作。

如您正打算尝试插件开发,务必请试用一下哦。

注意事项

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


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。