Webpack5+vscode搭建kintone开发环境(八)支持 React

cybozu发表于:2021年01月07日 14:20:17更新于:2021年07月28日 14:32:05

目录

第一篇:初始化项目
第二篇:代码规范
第三篇: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 的顺序

0015ffc0b03e569a05486160d18510a

start 一下开始调试把。


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