项目周边

这样_我有一个朋友
121 阅读4分钟

最近跟着做了一个Demo，提取一下文档，先把基础脚手架类的库给梳理一下。

1. Eslint/Prettier/Commitlint

这里主要是用来做代码规范，保持统一的代码风格，这样看起来能够更优雅。

  • Eslint -> 是一款插件化的 JavaScript 代码静态检查工具，其核心是通过对代码解析得到的 AST（Abstract Syntax Tree，抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。
  • Prettier -> 在格式化代码方面具有更大优势。ESLint主要工作就是检查代码质量并给出提示，它所能提供的格式化功能很有限。所以用两者搭配使用，但是两者之前功能有重叠，需要考虑交集的问题。
  • Commitlint -> 用来校验提交代码时候的commit信息，保证规范和后期的维护。

Eslint

//  安装eslint
npm i eslint -D

//  初始化生成配置文件，会在当前文件生成.eslintrc文件
npx eslint --init
在代码里面如何执行？
  • 对单个的文件执行 npx eslint a.js b.js
  • 对指定目录 npx eslint src scripts
  • 对项目全局执行 npx eslint --ext .jsx,.js .
如何进行修复？
  • 对单个文件 npx eslint --fix a.js
  • 对全局 npx eslint --fix --ext .js,.jsx .

忽略部分文件夹的校验，可以配置.eslintignore文件。

Prettier

在格式化代码方面， Prettier 确实和 ESLint 有重叠，但两者侧重点不同：ESLint 主要工作就是检查代码质量并给出提示，它所能提供的格式化功能很有限；而 Prettier 在格式化代码方面具有更大优势。需要配合Eslint来进行配置。

// 安装依赖
npm install --save-dev --save-exact prettier

// 新建prettier配置文件 .prettierrc.json
echo {}> .prettierrc.json

// 不需要格式化的文件
新建名为.prettierignore文件

// 在代码提交之前进行自动格式化 这个时候需要用到pre-commit hook
npm install --save-dev husky lint-staged
//会自动添加代码块在 package.json里面
"lint-staged": {
    "*.{js,css,md,tsx}": "prettier --write"
}
//  husky是git pre-commit 的工具，在commit之前运行 ·npx lint-staged·
// lint staged 就是运行 ·prettier --write· 命令，自动格式化命令

// tips: prettier和eslint一起工作会有冲突
npm install --save-dev eslint-config-prettier

// 然后到package.json里面找到eslintConfig加上prettier
"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ]
}

Commitlint

  • 用来验证commit的时候message必须包含特定的信息，不能为简单的fix这类的
  • 按需使用吧

2. 前端mock请求方案

  • Mock.js 请求拦截
  • 接口管理工具 rap/swagger
  • 本地node服务器 json-server

json-server

json-server就是在前端新建一个db.json的文件，然后通过node启动这个服务

npm install -g json-server

// 配置json文件
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

// 启动服务
json-server --watch db.json

// 通过postman进行测试
http://localhost:3000/posts/1
// 返回数据
{ "id": 1, "title": "json-server", "author": "typicode" }

// 也可以通过自定义middle来实现更复杂一点的mock 例如新建middler.js文件，这是启动的时候需要
json-server db.json --watch --port 3001 --middlewares middleware.js

3. CSS-in-JS

CSS-in-JS是指一种组织css的一种方式，代表框架有emotion/styled-component

传统css的缺陷:

  1. 缺乏模块的组织
  2. 缺乏作用域
  3. 样式隐式依赖
  4. 没有变量这一说法
  5. 耦合性高
  • Emotion 方案
// 安装
yarn add @emotion/react @emotion/styled

// 具体使用
const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr 6rem;
  grid-template-areas:
    "header header header"
    "main main main";
  height: 100vh;
  padding: 2rem;
`;
// 这里就是把样式文件写成component的一个一个的组件，用的时候就直接用<Container/>来代替<div/>就可以了

// 对于已有的组件 比如Antd里已有的Button这种就需要这样去包裹
const HeaderLeft = styled(Button)``;

这里引申出两种布局方案:

  • Grid布局 参考教程 Grid
  • Flex布局 参考教程 Flex

两者之间的区别/应用场景：

  1. 一维布局(Flex布局 / 二维布局(Grid布局
  2. 从内容出发-> 现有一组内容，数量不固定，均匀的分布在容器中，由容器的内容来填充 (Flex布局 / 从布局出发-> 先规划网格(数量一般固定，再把元素往里面填充(Grid布局

4. react query / swr

React-Query: 高性能，功能强大，异步请求。获取缓存来更新数据，不用当做全局状态来管理。

  • useQuery(get 方法，用useQuery请求的数据会自动存储在缓存里面
  • useMutation(post/patch/delete 方法，用来更新缓存里面的数据
  • queryClient.invalidateQueries('key') 使缓存里面的数据失效
  • queryClient.getQueryData('key') 获取缓存里面的数据

5. why did you render

用来对组件重复渲染给出反馈。它会对组件的 props 做 diff，如果组件重新渲染了，但是 props 并没改变，它会在命令行提醒你 props 并没有变化。这个工具嵌入到了 React 组件的生命周期中，所以他能在组件重新渲染时比对 props 是否变化。 使用: follow github readme.

avatar
文章
阅读
粉丝