Index

• 概要

• 上传机制

• 使用方法

• 最后

概要

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

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

上传机制

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

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

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

注意：customize-uploader只能上传单一自定义文件，不支持将多个自定义文件上传到多个应用中。本次对《向JavaScript自定义中级开发者的目标前进（１） 〜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

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

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

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

在开发模式下上传

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

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

最后

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

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