如何通过VS Code的Live Server Extension来提高kintone自定义的开发效率!

aki发表于:2020年06月29日 15:37:03更新于:2022年01月05日 14:53:27

概要

在进行kintone自定义开发的时候,要把写好的代码文件上传到相应的应用里。

开发过程中难免需要调试重复修改,每修改一次就要上传一次是不是觉得特别麻烦?

本篇介绍在开发过程中免于重复多次上传代码,而是直接将修改的地方直接反映到自定义环境中。

 

※ 请注意本Tips只能用于开发时,仅可在自己的终端上确认。

※ 如果是想多个用户一起进行测试等情况,您可以考虑customize-uploader(日语)。

用到的工具

另外,您需要提前安装好VSCode和LiveServer。

 工作原理 

在开始介绍之前,先大致介绍以下其工作原理。

0015ef999ea94f218137598f8df8987

kintone自定义可以通过指定文件的URL来添加文件。

可以使用该功能添加自己本地开发环境的URL(localhost)。

要发送localhost的JavaScript/CSS文件,需要使用LiveServer的功能。

大致的工作原理如上。

但是,kintone自定义的URL栏只能指定https。

受这个限制,LiveServer需要在https模式下运行。

以下就是LiveServer在https模式下运行所需的设置。

需要做哪些事情?

  1. 使用mkcert生成通过浏览器访问https://localhost时必要的有效证书和密钥。

  2. 使用Live Server Extension通过https格式发送正在编辑的文件

  3. 启动LiveServer

  4. 在kintone自定义URL栏输入Live Server Extension的URL

  5. 可以开始开发了

使用webpack的话还需要多加几步,后面会说到。

使用mkcert生成访问https://localhost时所需的有效证书和密钥

浏览器在访问https://localhost时会判断是否安全,因此需要以下内容:

  1. 安装证书到操作系统里

  2. 使用(1)里安装的证书和密钥运行https服务器

而能够帮我们简略这步工作的是mkcert。不管是什么操作系统都可以用。

请下载以下工具进行(1),(2)的操作。

※2019年4月时的最新版是1.3.0。使用时,请从这里下载最新版。

 

mkcert下载完后,执行以下代码(以Mac为例):

# $ tree .
# .
# └── mkcert-v1.3.0-darwin-amd64
# 

chmod +x mkcert-v1.3.0-darwin-amd64
./mkcert-v1.3.0-darwin-amd64 -install
# 根据要求输入Password

./mkcert-v1.3.0-darwin-amd64 localhost 127.0.0.1 ::1

# 执行后会生成证书
# $ tree .
# .
# ├── localhost+2-key.pem   # 密钥
# ├── localhost+2.pem       # 证书
# └── mkcert-v1.3.0-darwin-amd64

如果是Windows,除了以下内容,其他按同样的方式执行。

  • 执行文件为mkcert-v1.3.0-windows-amd64.exe

  • chmod命令不需要

  • 不用输入密码,取而代之的是弹出安全警告,请点击【确定】

生成的证书和密钥仅限于用于开发目的,请不要共享给其他人。

通过Live Server Extension实现正在编辑的文件通过https实时发送

接下来,用mkcert生成的证书和密钥通过https来运行LiveServer。

  1. 依次点击VScode左下角的齿轮按钮 > 设置

  2. 显示设置选项卡,点击“工作区”设置

  3. 在顶部的搜索框输入“Live http”

  4. 编辑“Live Server > Settings:Http”项的内容
    编辑内容请参考下述的“liveServer.settings.https下的设置项” 。
    0015f47190eb38e7c6097e373c0e0bd

或者根据Creating User and Workspace Settings 上的步骤打开settings.json,添加设置内容。

{
  	"settings": {
		"liveServer.settings.https": {
			"enable": true,
			"cert": "/home/cybozu/cert/localhost+2.pem",
			"key": "/home/cybozu/cert/localhost+2-key.pem",
			"passphrase": ""
		}
	}
}

liveServer.settings.https下的设置项

  • 设置enable: true时,按https运行

  • 设置用cert: mkcert生成的证书的路径

  • 设置用key: mkcert生成的密钥的路径

  • passphrase:是私钥的密码,设为空

settings.json中可能还含有其他扩展功能的设置,复制时请注意。

启动LiveServer:

启动图标是VSCode页面上的一部分,点击如下图中的图标启动LiveServer,会在浏览器上打开https://localhost:5500

0015efe9e8a7dd259d409bdc1e031a5

用浏览器访问时,应该会显示和项目的结构相同的文件。

listing_directory__.png

点击文件夹,可以打开文件夹。

在kintone的自定义URL栏中输入Live Server Extension的URL

选择开发所使用到的文件时,会在浏览器上显示JavaScript文件。

  1. 复制kintone自定义开发的文件URL。

  2. 在kintone的自定义页面上添加刚才复制的URL。

  3. 保存到kintone。

0015f02a774177224656da0a253061f

到这里为止,准备就完成了。

封装kintone自定义

试着修改一下您的kintone自定义文件,然后刷一下页面。

修改的地方应该可以立即反映到页面上。

针对Webpack用户的设置

使用Webpack进行开发时,要用到Webpack里的watch选项。

  1. 在带watch选项的情况下编译webpack

  2. LiveServer端通过webpack的API复制编译后的URL

  3. 在kintone的JavaScript自定义里添加URL

在带watch选项的情况下编译webpack:

npx webpack --mode development --colors --watch

访问https://localhost:5500,复制在webpack.config.js中设置的内容的程序URL。

将此URL贴到kintone自定义的URL中就完成了。

※ webpack-dev-server这个工具也内置https模式,也可以使用这个。
在此不做详细介绍,如您想尝试一下,请参考使用webpack-dev-server + mkcert通过有效的https请求发送编译好的文件(日语)

此Tips在2019年4月版的kintone中确认过。

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