目录
第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11 兼容
第八篇:支持 React
第九篇:支持 Typescript>
第十篇:命令行工具
安装 React
React 是目前流行的前端开发框架，先从安装开始
npm install react react-dom
安装了这 2 个就能使用 jsx 语法了，让我们修改 index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './app.css'
const App = () => {
return (
<div className="app">
<h1>hello, kintone!</h1>
</div>
)
}
kintone.events.on('app.record.index.show', (event) => {
ReactDOM.render(<App />, kintone.app.getHeaderSpaceElement())
return event
})这样就行了？
首先报错的是 eslint，我们需要修改 .eslintrc.js 中的规则：
module.exports = {
extends: ['@cybozu/eslint-config/globals/kintone', '@cybozu/eslint-config/presets/react-prettier'],
rules: {
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
},
}react-prettier：提供 jsx 语法规则并不会和 prettier 冲突
react/jsx-filename-extension：jsx 语法在 js、jsx 后缀名的文件中将不再报错
如果你 build 一下就会发现，webpack 解析不了 jsx 语法。
要对 jsx 语法进行转译，大家会很容易联想到我们的老朋友 Babel，这次要使用 @babel/preset-react
npm install @babel/preset-react -D
修改 .babelrc 文件，在 presets 中加入 @babel/preset-react
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
"@babel/preset-react"
],
// others
}presets 的执行顺序是从后到前的，这里先转化 react，在处理兼容代码。
顺手再为 .jsx 文件提供支持，修改 webpack.common.js 文件：
module.exports = {
//others
resolve: {
extensions: ['.js', '.jsx', 'json'],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: { cacheDirectory: true },
exclude: /node_modules/,
},
//others
],
},
}resolve：在 extensions 中定义好后缀名后，代码中的 import 就不需要明确写后缀名了，webpack 会自动补足。
test：修改正则表达式，目前支持 js 和 jsx 中使用 babel。
表面上看，这样就可以了，start 和 build 都能正常跑起来，开发代码也没什么问题了。
特殊支持
让我们在 index.js 中加入以下代码
//others
class Bork {
boundFunction = () => {
return this.state
}
}eslint 又出错了，这次是使用 es6 类属性不支持。
先安装
npm install @babel/eslint-parser -D
修改 .eslintrc.js
module.exports = {
parser: '@babel/eslint-parser',
//others
}另外在这里，箭头函数要被当作 class 的属性来看待，为的是 this 不能指向 undefined。（在 javascript 里面，this 的指向非常复杂，有兴趣的可以去这里看看。）
要支持以上特性，我们需要添加 @babel/plugin-proposal-class-properties
npm install @babel/plugin-proposal-class-properties -D
在.babelrc 的 plugins 中加入：
{
//others
"plugins": [
"@babel/plugin-proposal-class-properties",
//others
]
}再次编译看看效果吧。
external 减少打包体积
到目前为止，我们无论是开发还是生产，都要先经过 webpack 将 react、react-dom 的代码打进我们最终生成的代码中。
对于这种基础的第三方包，很多人都想把它剥离出去或者采用 CDN 链接形式。
修改 webpack.common.js，在 module.exports 中加入
module.exports = {
//others
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
//others
}打开 kintone app，在自定义 js 中填入 React 的 CDN 链接
https://unpkg.com/react@17/umd/react.production.min.js
https://unpkg.com/react-dom@17/umd/react-dom.production.min.js
注意 js 的顺序
start 一下开始调试把。