向JavaScript自定义中级开发者的目标前进(3) 〜自动批量上传文件篇〜

aki发表于:2020年10月20日 14:11:00更新于:2021年10月27日 10:00:09

Index

概要

在《向JavaScript自定义中级开发者的目标前进(1) 〜webpack篇〜》中介绍了可支持多应用自定义开发的Webpack的导入等环境搭建方法,在《向JavaScript自定义中级开发者的目标前进(2) 〜用async/await取代Promise篇〜》中介绍了可让Promise代码变得更加简洁的async/await。
(如您还未看过这些内容,请务必在阅读本文前先看一下)

但是,写好自定义文件还是得手动上传,调试时特别不方便。
为此,本次向大家介绍自动上传自定义文件的方法。

上传机制

将自定义文件上传到kintone的方法有以下文章中介绍的几种。

kintone自定义文件上传方法总结

本次使用才望子发布的customize-uploader来实现自动上传。

注意:customize-uploader只能上传单一自定义文件,不支持将多个自定义文件上传到多个应用中。本次对《向JavaScript自定义中级开发者的目标前进(1) 〜webpack篇〜》中介绍的webpack的设置等进行扩展,提供了批量上传编译后JavaScript文件的命令。

使用方法

首先,请clone或pull以下仓库。

https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate

准备自定义用的资源配置文件

资源配置文件里的内容用于告诉自定义上传工具“哪个JavaScript文件对应哪个应用”等信息。

在src/apps/app1 等目录下有JavaScript文件,在这里准备customize-manifest.json。

  • 例: src/apps/app1/customize-manifest.json
    如下是以app1为例子的设置范例。编译后的文件保存在dist/app1.js中,需要指定该文件。其他的JS以及CSS请根据需要进行设置。

    {
        "app": "1",
        "scope": "ALL",
        "desktop": {
            "js": [
                "dist/app1.js"
            ],
            "css": []
        },
        "mobile": {
            "js": []
        }
    }

准备kintone的环境信息

在项目的根目录下创建.env文件,在文件中如下填写要上传的环境信息。请注意不要对外公开.env文件或传给第三方。

  • .env文件
    如下设置域名、用户和密码。用户必须要有可以管理JavaScript自定义的权限。

    假设域名为https://{sample}.cybozu.cn,用户名为user01,密码为password01的填写范例)

    KINTONE_BASE_URL=https://{sample}.cybozu.cn
    KINTONE_USER=user01
    KINTONE_PASSWORD=密码 password01

编译和上传

请事先阅读Readme的事前准备,并安装npm和相关库。※仅初次需要此操作

customize-manifest.json准备好后,和前次一样进行编译。

npx webpack --mode production

接下来,输入如下命令上传。可批量上传在资源配置文件中设置的文件。

npm run upload

FEW4P6wsRo.gif

如果想上传单个文件,如下指定资源配置文件。

npm run upload src/apps/app1/customize-manifest.json

如在命令行里显示如下结果则表示成功了。

mceclip0.png

在开发模式下上传

执行以下命令的话,可以监视文件是否有更改,如有更改将自定编译更改的文件并上传。在开发以及调试的时候特别方便。

npx webpack --watch --mode development --upload

最后

通过以上设置就可以自动上传了,可以大大提高开发效率,希望大家能够充分利用。

另外,还可以根据自己项目的实际需求,对webpack以及脚本进行自定义,可实现诸如对开发环境和正式环境分别上传文件等功能。不过这个可能难度有点大,且本次未提供。仅作为参考。


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