TypeScript+React for kintone开发模版

cybozu发表于:2020年11月24日 10:00:52更新于:2020年12月22日 14:00:56

Index

概要

这是一个 React for kintone 的开发模版。

  • 支持 typescript、javascript、css、less、scss

  • 支持代码自动格式化和修正(需安装相应的 Visual Studio Code 扩展)

  • 支持自动转译成 es5 代码(IE11 兼容)

  • 支持自动转译 CSS 语法(IE11 兼容)

  • 转译功能仅针对 src 目录下的文件,本文档不对第三方包的问题提供帮助

下载

开发模板:kintone-react-demo.zip


开发环境依赖

必须安装的软件
  • Nodejs

  • Visual Studio Code

  • mkcert

需要安装的 Visual Studio Code 扩展
  • EditorConfig

  • Prettier

  • ESLint

  • StyleLint


安装

  1. 修改 package.json 文件中的 name、description、author、license 字段

  2. 修改 LICENSE 文件,改成你自己想要的许可协议

  3. 进入项目根目录,打开终端

  4. 中国大陆地区的用户请执行npm config set registry https://registry.npm.taobao.org

  5. 执行npm i

  6. 执行mkcert -install # 根据要求输入 Password

  7. 执行mkcert localhost 127.0.0.1 ::1

  8. 执行npx kintone-dts-gen --host https://xxxx.cybozu.cn -u xxx -p xxx --app-id xxx 请把 xxx 替换成你自己的 kintone app 信息

  9. 把生成的 fields.d.ts 文件放入 src 目录下

注意

生成的fields.d.ts文件中,每行结尾带有分号,由于我在.prettierrc中设置了"semi": false,所以本模版中是不允许分号的。请自行去掉分号。(安装过Prettier扩展的同学只要打开fields.d.ts后,按下保存即可)


使用

开发调试
  1. 执行npm run start

  2. 在 kintone app 设置的 Javascript 自定义中填入 https://localhost:8080/js/app.js

  3. 随便写些代码,保存后不需要再执行本地操作,直接刷新 kintone 看效果

发布
  1. 执行npm run build

  2. 将 dist 目录下的 css 、js 文件填入 Kintone app 后台的 Javascript 自定义中


注意事项

config 文件中被注释掉的功能
  • PurgeCSSPlugin: 为了去除不使用的样式,但在实际使用过程中发现会遗漏部分第三方包中的 css,导致代码异常。虽然官方推荐使用 whitelist + 正则 来回避问题,但考虑到某些第三方包并没有使用统一的 classname,故此被注释掉。

  • BundleAnalyzerPlugin: 每次 build 之后会自动打开 bundle 分析页面。

  • externals: 这里不会把 react 的代码打进我们最终生成的代码中,但你需要以另外的方式将其引入,不然生成的 js 将无法运行。

该项目尚未成熟,欢迎大家积极提 issus 和 PR。

附件:kintone-react-demo.zip • 14.54KB • 下载