提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【Techo Day 腾讯技术开放日】jira React 实战

技术腾讯React 实战 Day Jira 开放日 Techo
2023-06-13 09:14:15 时间

创建项目

1. 使用脚手架初始化项目

npx create-react-app jira --template typescript

脚手架初始化项目遇到的问题

说明： 这里使用脚手架安装项目的时候遇到了一个问题，大致可能说的是 node 版本不匹配，也就是我的版本低了，截图如下。

后来在网上找到了解决问题的办法：解决办法链接

// 解决命令
yarn config set ignore-engines true

2.运行项目

cd jira
npm start

3. tsconfig 文件添加规则

打开 tsconfig.json 文件夹，在编译选项中配置 baseUrl 选项，指向当前路径下 src 目录。

{
"compilerOptions": {
        "baseUrl": "./src"
    }
}

4. 配置格式化代码风格 - prettier

  • 安装依赖
yarn add --dev --exact prettier
  • 创建配置文件
echo {}> .prettierrc.json
  • 创建 .prettierignore 文件

即在该文件中声明不需要格式化的文件

// .prettierignore
build
coverage
  • 手动格式化命令
yarn prettier --write
  • 自动格式化代码

在我们的项目每次提交前，我们可以借助 Pre-commit Hook 工具完成自动格式化。

  • 运行命令
npx mrm lint-staged

我们可以打开 package.json 看到，该命令添加了以下内容

"lint-staged": {
    "*.{js,css,md}": "prettier --write"
}

由于我们是一个 ts 项目，我们在项目中添加扩展名中添加 ts, tsx。

"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
}

5. 配置 eslint

  • 安装
yarn add eslint-config-prettier
  • 修改 eslint config
// 修改前
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
// 修改后
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
  },

即用 prettier 的规则替换之前的一部分规则。

6. 配置提交规范 commitlint 工具

  • 安装
yarn add @commitlint/{config-conventional,cli} -D

7. 使用 mock 工具 模拟后端接口

这里我们综合考虑后，选择 json-server.

  • 安装依赖
yarn add -D json-server
  • 创建 db 目录

目录名称为 __json_server_mock__

目录中包含 db.json 文件。

  • scripts 脚本中添加启动 json-server 脚本
"scripts": {
    "json-server": "json-server __json_server_mock__/db.json --watch"
  },

项目启动

相关文章