web-react

react 学习笔记

一.typeScript

1.TypeScript 工程化开发

  • 前端工程化就是通过流程规范化、标准化提升团队协作效率
  • 通过组件化、模块化提升代码质量
  • 使用构建工具、自动化工具提升开发效率
  • 编译 => 打包（合并）=> 压缩 => 代码检查 => 测试 => 持续集成

2.初始化项目

mkdir react-ts-demo
cd react-ts-demo
npm init
package name: (react-ts-demo)
version: (1.0.0)
description: TypeScript工程化开发
entry point: (index.js)
test command:
git repository: https://gitee.com/zhufengpeixun/react-ts-demo
keywords: typescript,react
author: zhangrenyang
license: (ISC) MIT

3.git 规范和 changelog

3.1 良好的 git commit 好处

  • 可以加快 code review 的流程
  • 可以根据 git commit 的元数据生成 changelog
  • 可以让其他开发者知道修改的原因

3.2 良好的 commit

  • commitizen 是一个格式化 commit message 的工具
  • validate-commit-msg 用于检查项目的Commit message是否符合格式
  • conventional-changelog-cli 可以从git metadata生成变更日志
  • 统一团队的 git commit 标准
  • 可以使用angular的git commit 日志作为基本规范
    • 提交的类型限制为 feat、fix、docs、style、refactor、perf、test、chore、revert 等
    • 提交信息分为两部分，标题（首字母不大小写，末尾不要加标点）、主题内容（描述修改内容）
  • 日志提交友好的类型选择提示 使用commitize工具
  • 不符合要求格式的日志拒绝提交的保障机制
    • 需要使用validate-commit-msg工具
  • 统一 changelog 文档信息生成
    • 使用conventional-changelog-cli工具
cnpm i commitizen validate-commit-msg conventional-changelog-cli -D
commitizen init cz-conventional-changelog --save --save-exact
git cz

3.3 .gitignore

.gitignore

node_modules
.vscode
dist

3.4 提交的格式

<type>(scope):<subject/>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
  • 代表某次提交的类型，比如时修复 bug 还是增加 feature
  • 表示作用域，比如一个页面或一个组件
  • 主题，概述本次提交的内容
  • 详细的影响内容
  • 修复的 bug 和 issue 链接
类型含义
feat新增 feature
fix修复 bug
docs仅仅修改了文档，比如 README、CHANGELOG、CONTRIBUTE 等
style仅仅修改了空格、格式缩进、偏好等信息，不改变代码逻辑
refactor代码重构，没有新增功能或修复 bug
perf优化相关，提升了性能和体验
test测试用例，包括单元测试和集成测试
chore改变构建流程，或者添加了依赖库和工具
revert回滚到上一个版本
ciCI 配置，脚本文件等更新

3.4 husky

  • validate-commit-msg可以来检查我们的 commit 规范
  • husky 可以把validate-commit-msg作为一个githook来验证提交消息
cnpm i husky validate-commit-msg --save-dev
"husky":{
  "hooks":{
    "commit-msg":"validate-commit-msg"
  }
}

3.5 生成 CHANGELOG.md

  • conventional-changelog-cli默认推荐的 commit 标准是来自 angular 项目
  • 参数-i CHANGELOG.md表示从CHANGELOG.md读取changelog
  • 参数-s 表示读写CHANGELOG.md为同一文件
  • 参数-r 表示生成 changelog 所需要使用的 release 版本数量，默认为 1，全部则是 0
cnpm i conventional-changelog-cli -D
"scripts":{
  "changelogs":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
}

4.支持 Typescript

  • tsconfig-json
  • 编译选项
tsc --init`

基本参数

参数解释
target用于指定编译之后的版本目标
module生成的模块形式：none、commonjs、amd、system、umd、es6、es2015 或 esnext 只有 amd 和 system 能和 outFile 一起使用 target 为 es5 或更低时可用 es6 和 es2015
lib编译时引入的 ES 功能库，包括：es5、es6、es7、dom 等。如果未设置，则默认为:target 为 es5 时：["dom","es5","scripthost"]target 为 es6 时：["dom","es6","dom.iterable","scripthost"]
allowJs是否允许编译 JS 文件，默认是 false，即不编译 JS 文件
checkJs是否检查和报告 JS 文件中的错误，默认是 false
jsx指定 jsx 代码用于的开发环境preserve指保留 JSX 语法，扩展名为.jsx,react-native 是指保留 jsx 语法，扩展名 js,react 指会编译成 ES5 语法
declaration是否在编译的时候生成相应的.d.ts声明文件
declarationDir生成的.d.ts 文件存放路径，默认与.ts 文件相同
declarationMap是否为声明文件.d.ts 生成 map 文件
sourceMap编译时是否生成.map文件
outFile是否将输出文件合并为一个文件，值是一个文件路径名，只有设置module的值为amd和system模块时才支持这个配置
outDir指定输出文件夹
rootDir编译文件的根目录，编译器会在根目录查找入口文件
composite是否编译构建引用项目
removeComments是否将编译后的文件中的注释删掉
noEmit不生成编译文件
importHelpers是否引入tslib里的辅助工具函数
downlevelteration当 target 为ES5或ES3时，为for-of、spread和destructuring中的迭代器提供完全支持
isolatedModules指定是否将每个文件作为单独的模块，默认为 true

5.函数式组件

interface Props {
  name:string,
  actionRef?:any
}
export default (props:Props){
  return <div>{props.name}</div>
}
Edit this doc on GitHub8/8/2022 09:38:12