Create-React-App 进阶笔记

Create-React-App.png

CreateReactApp 是学习 React 的必经之路，其本身也值得深入学习，本文记录了如何给该脚手架添加一些额外功能

修改启动端口

根目录创建 .env.development 文件，写入

PORT=4000

代码包体积分析

安装插件

npm install --save source-map-explorer

// 或
yarn add source-map-explorer

添加配置命令：在 package.json 中添加以下命令

  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
  }

执行打包命令后就可以使用命令分析打包后的代码包了

npm run build
npm run analyze

集成 Eslint 和 Prettier

使用前提：VSCode 安装并启用了 Eslint 和 Prettier 插件，才会在编辑器中显示提示信息

配置 Eslint

安装并初始化配置

// 安装 eslint 插件
npm install eslint --save-dev

// 初始化 eslint 配置
npm init @eslint/config

执行初始化命令后，根据提示和需要选择自己想要的配置，选在配置文件类型时

What format do you want your config file to be in?

建议选择 JacaScript，方便写注释。上述所有命令执行完成后会自动安装以下几个插件（版本可能会有变动）, 并生成一个 .eslintrc.js 文件

// 安装的插件
eslint-plugin-react@^7.28.0 
eslint-config-airbnb@latest 
eslint@^7.32.0 || ^8.2.0 
eslint-plugin-import@^2.25.3 
eslint-plugin-jsx-a11y@^6.5.1 
eslint-plugin-react-hooks@^4.3.0

附上生成的 .eslintrc.js 作参考：

module.exports = {
 env: {
   browser: true,
   es2021: true,
   node: true,
 },
 extends: [
   'eslint:recommended',
   'plugin:react/recommended',
 ],
 parserOptions: {
   ecmaFeatures: {
     jsx: true,
   },
   ecmaVersion: 'latest',
   sourceType: 'module',
 },
 plugins: [
   'react',
 ],
 rules: {
   // rules 根据自己的需要配置
 },
};

配置 Prettier

安装 prettier 插件

// 安装 prettier
npm install --save-dev prettier

根目录创建 prettier.config.js 配置文件，根据自己的需要配置格式化的规范，如：

// prettier.config.js

module.exports = {
  printWidth: 180, // 代码换行的字符长度
  tabWidth: 2,
};

同时使用

由于 Eslint 和 Prettier 对会检测代码语法，同时使用时有可能造成规则冲突，因此需要额外安装一些插件，从而避免两者的语法检查产生冲突

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

安装完成后，在 eslint 的配置文件中加入 "plugin:prettier/recommended"

// .eslintrc.js 
{
    "extends": [
        "plugin:prettier/recommended"
    ]
}

到这里就已经配置好了，可以放手开撸了，最好是重启一下编辑器，部分冲突的配置需要重启后才会生效。

常见错误解决

Delete ␍ eslint prettier/prettier

以上错误是由于行尾序列不一致导致的，只需要在 .prettier.config.js 中加入

{
    endOfLine: 'auto'
}

其他解决办法可根据报错信息自行搜索。

'React' must be in scope when using JSX react/react-in-jsx-scope

解决方案一：在所有使用到 react 语法的文件顶部引入 React

import React from 'react';

解决方案二：在 .eslintrc.js 配置文件中，给 extends 字段添加 plugin:react/jsx-runtime 表示兼容 jsx 新的语法

extends: [
    'eslint:recommended',
    'plugin:react/jsx-runtime', // 兼容 jsx 新的语法
]