第八期:前端九条启发分享
一、 设置git commit的校验 (husky:^5版本之前配置与这里不一样)
在个别状况下, 咱们每次执行git commit -m'提交信息'的时候, 会触发针对commit信息的校验以及代码格调的校验, 如果没通过校验会导致commit失败, 那么这些校验是如何退出到我的项目中的那?
大部分时候增加针对commit的校验咱们会应用husky这个包, 让咱们来装置一下它:
yarn add husky -D 在packgae.json中增加上面内容, 这里是初始化.husky/目录并指定该目录为git hooks所在的目录, 所谓的git hooks能够了解为git的钩子函数, 比方git add执行之前, git commit之后等等生命周期的钩子函数, 而git hooks所在目录就是用来定义git各个生命周期须要执行的各种函数。
{ "scripts": { "prepare": "husky install" }}第一步: 增加代码校验
接下来咱们在命令行执行:
yarn preparenpx husky add .husky/pre-commit "npm run lint" 上述第二条命令定义了pre-commit这个生命周期执行npm run lint 这句命令。
在packgae.json中定义lint命令是应用eslint检测src文件夹里的文件, 当然啦检测什么文件都能够。
"scripts": { "lint": "eslint src" },第二步: 增加提交信息校验
校验commit信息咱们最简便的形式就是依赖commitlint这个包。
yarn add @commitlint/config-conventional @commitlint/cli -D 在根目录里新建commitlint.config.js并写入上面内容:
module.exports = { extends: ["@commitlint/config-conventional"] };增加校验commit的hook:
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"' 下面命令的意思是创立一个commit-msg hook的文件, 外面的内容是npx --no-install commitlint --edit "$1"。
commitlint命令来检测$1这个参数的值是否非法, 而$1就是咱们的git commit -m ${1}。
校验的规范
请查阅标准文档
这里我只列出最罕用的几个:
| 标准 | 应用形式 |
|---|---|
| docs | git commit -m"docs: 更新xxx文档" |
| feat | git commit -m"feat: 新增xxx模块" |
| fix | git commit -m"fix: 修复了上线的xxxxbug" |
| style | git commit -m"style: 更新用户信息弹框的款式" |
| test | git commit -m"test: 批改增加用户按钮的测试用例" |
与你我的项目里配置不一样?
有的同学可能发现了, 我这里的写法可能与你我的项目里的写法不统一, 你的我的项目可能是如下的写法:
{ "husky": { "hooks": { "pre-commit": "npm run test", "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" } }} 上述写法是husky^6版本之前的写法, 当初husky曾经更新到了7版本, 所以将来创立新我的项目可能不会再用这种写法配置了。
git的hook
git官网形容hooks
二、 ///这种正文的应用
咱们在react我的项目代码里会看到上面这种正文, 那么这种奇怪的正文是干么的那?
/// <reference types="react-scripts" /> 原来这种/// <reference types="包" />的写法次要用在.d.ts文件外面, 作用是引入其余的.d.ts文件, 比方我须要用到一个xxx.d.ts文件, 然而这个并没有放在node_modules/@types外面, 所以并不会被零碎默认导入。
ts官网给出的解释
三、 举荐一款react疏导插件 guide
插件地址
个别网站第一次拜访的时候都会有个疏导操作, 应用guide就能够轻松实现, 让咱们一步步来配置:
yarn add byte-guide 这个插件的应用办法的中心思想是, 咱们以数组的模式传入一套配置, 找个配置外面有要被挂载的指标dom, 以及显示的文案等信息, 而后每次点击下一步就能够顺次执行数组内的对象:
import Guide from "byte-guide";export default function Home() { const SEARCH = { hotspot: true, title: "搜寻组件", selector: "#search", placement: "top-left", content: <div>这个搜寻组件很厉害</div>, offset: { x: 20 }, }; const TOTAL = { title: "列表总数", parent: "#search", selector: "#total", placement: "right", content: "这里是列表总数。", }; return ( <div className={"org"}> <div id={"search"}>指标1</div> <div id={"total"}>指标2</div> <Guide lang="en" localKey="uni-key" className="my-guide" steps={[SEARCH, TOTAL]} onClose={() => { console.log("点击敞开"); }} afterStepChange={(nextIndex, nextStep) => { console.log("点击下一步"); }} /> </div> );}次要属性的阐明
localKey: 咱们疏导组件的显示个别是只有用户第一次登录才显示, 或者是当用户点击了疏导的完结按钮就永远不显示了,guide将是否须要展现疏导组件的值贮存在Local Storage中, 所以这里定义了贮存的key名。placement定义了弹出框所在的地位, 比方顶端的元素咱们会抉择应用bottom之类的属性。offset尽管设置了placement然而不免地位不尽人意, 所以能够应用这个属性对疏导框进行地位的再调。
注意事项
组件内置了简略的国际化, 也就是当咱们不指定文案的时候, 他本人会依据传入的语言英语、中文、日语进行文案的扭转。
这个插件有bug, 如果两个元素处于父元素的外部滚动状态时, 会呈现定位偏差十分多的问题, 所以如果你的疏导我的项目波及外部滚动的元素则不倡议应用这个插件。
四、 eslint 7 版本之后能够正文
发现团队我的项目中难免会呈现一些/* eslint-disable*/ 这种正文, 每次看到会尝试将其删除, 然而可能会引起一系列的连锁翻译, 这种状况下如果咱们应用的是eslint^7版本及以上, 则能够增加正文, 阐明为什么这里必须应用/* eslint-disable*/ 。
// eslint-disable-next-line a-rule -- 这里的谬误无奈修复！ 下面的写法更加敌对, 因为毕竟这种禁止eslint检测的形式不举荐大家应用, 如果必须要应用也须要在初期就表明起因。
五、 对立一个index文件导出的利与弊
比方咱们有很多的工具办法放在同一个文件夹下,a.js文件导出a1, a2等办法 咱们经常应用一个index.js文件进行对立的导出, 我的项目里会有很多如下的写法:
export * from './a';export * from './b';export * from './c';export * from './d';这种写法尽管看起来计较"优雅"然而有不少弊病存在, 这里咱们就列举一下:
1: 导出名字可能反复
这是个小问题因为会有ts报错提醒, 起因是index.js文件外面没有写出具体的办法名, 所以须要每次批改注意一下index文件是否报错。
2: 代码寻径麻烦
这点也就是对操作最不敌对的一点, 比方咱们在某个页面上有一个外界导入的办法, 咱们mac电脑的话点击`c
ommand + 鼠标左键就能够查到这个办法的出处, 然而往往只是寻径到了index.js`, 这里也没有具体的办法名称出现, 所以须要再次进到各个文件外面查问。
3: 扭转导出没有提醒
当咱们批改一个导出时没有提醒, 比方删掉一个导出办法, 批改一个导出办法的名称, 此时并不会在文件自身以及index.js文件种报错, 报错的中央是具体应用到这个办法的文件, 这就可能会疏忽到, 因为不启动我的项目间接git push也是能够测验通过的。
4: ts类型二次推导
有时候会呈现你命名导出了一个办法函数, 然而eslint报错说没有导出该成员, 然而当咱们进入到这个办法的文件夹里后, eslint的报错就隐没了, 这种不好的体验都与这种写法无关。
六、svgr库转换svg图片, filter:drop-shadow
xxx.svg这些文件是不好管制的, 咱们想动静的传入很多配置可能须要借助svgr这个库将svg图片转换成react组件的模式, 通过上面的命令能够在命令行生成代码数据:
npx @svgr/cli --icon 图片的地址.svg 在命令行里生成必定是不能工程化的, 其实各种脚手架曾经内置了这个svgr库, 所以咱们其实如下形式就能够应用组件模式的svg图片啦。
import { ReactComponent as Logo } from "./logo.svg";// ....<Logo width={"30px"} style={{ filter: "drop-shadow(red 20px 0)" }} /> filter: "drop-shadow(red 20px 0)"这句能够使svg变成红色,对于它的细节我会单拿一篇文章去讲。
七、 yarn resolutions 治理被多我的项目依赖的包
我的项目中会援用很多的npm包, 比方咱们我的项目外面依赖了A包, A包本身又依赖 ^3.1.5版本的B包, 咱们我的项目自身yarn add B曾经装置了^3.0.5版本的B包, 此时B包其实是能够通用的, 齐全没必要援用两个版本。
并且如果打包的话因为咱们两处依赖的不同版本的B包导致打包后体积的增大, 所以yarn提供了resolutions这个配置项, 咱们能够如下配置(package.json):
"resolutions": { "B": "^3.1.5" }举一个理论的例子
咱们创立一个新我的项目
npx create-react-app 项目名称进入到我的项目中
yarn list --depth=1列出我的项目的依赖, 并且只打印一级依赖即可, 咱们就以workbox-build为例:
咱们在外层package.json进行配置:
"resolutions": { "fs-extra": "^4.0.2" }此时执行yarn命令, 并且在此yarn list --depth=1打印:
下面的依赖关系曾经变动了, 不是仅仅在workbox-build包的上面了。
八、 pnpm 代替 yarn lean做包的治理
咱们常常应用yarn + lean这种形式治理子项目, 然而传输中pnpm更适宜做这个工作, 那么为什么说pnpm更适宜那?
yarn治理node_modules的机制会导致, A包依赖的B包, 那么B包的文件地位会处于与A包同级, 这就导致开发者尽管没有执行yarn add B然而我的项目中也能够引入import B from 'B', 这就为开发埋下拉隐患。
pnpm采纳的形式是, 将包对立治理, 单个我的项目的node_modules文件外面贮存的相似软连贯, 这样就不会呈现反复装置某个依赖的状况了, 并且也没必要将B 与 A放在同一层级了, 也就不存在莫名其妙的引入B包的状况。
当咱们有很多子项目并且依赖越来越简单的时候, pnpm的劣势就显示进去了。
九、 微前端的子利用, 如何独自启动
微前端利用外面都会有几个子项目, 这些子项目往往会依赖一个主我的项目(壳工程), 主我的项目负责散发一些重复使用的资源, 比方react react-router等等专用的依赖, 并且也会呈现主我的项目里的一些自定义的utils工具办法传递给子项目。
因为存在泛滥须要主我的项目散发的资源那么就对子我的项目独自的运行制作了艰难, 咱们每次都要启动至多主我的项目+子项目, 并且想要看到残缺工程还须要启动其余的所有子项目, 但咱们有什么方法只启动子我的项目本身那?
我这里的做法是利用申请的代理, 因为大部分微前端框架的原理是每个子项目都是一个js文件, 主利用启动后按需加载子项目的js入口文件, 那么咱们就能够拜访线上测试环境的地址, 而后找到线上测试环境的主利用拜访子利用的url, 而后将这个url代理其指向本地启动的子项目的地址即可。
这样做的益处就是能够让子项目齐全处于一个线上环境的主利用的上下文里, 并且不必启动其余子项目, 要留神子项目的css文件也要代理过去。
end
这次就是这样, 心愿与你一起提高。