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。