第八期：前端九个启蒙分享

时间：2023-03-31 18:06:46 vue.js

第八期：前端九个启蒙分享1、设置gitcommit的验证（husky：^5版本之前的配置和这里不一样）timecommit-m'commitinformation'时，会触发对commit信息和代码风格的校验。如果验证失败，提交将失败。这些验证是如何添加到项目中的？其中大部分在为commit添加验证时，会用到husky包，我们安装一下：yarnaddhusky-D在packgae.json中添加如下内容，这里是initialization.husky/目录，并指定该目录为githooks所谓githooks可以理解为git的钩子函数，比如gitadd执行前、gitcommit后等生命周期的钩子函数，以及githooks所在的目录定义git的各种生命周期需要执行的函数。{"scripts":{"prepare":"huskyinstall"}}第一步：添加代码校验接下来我们在命令行执行：yarnpreparepxhuskyadd.husky/pre-commit"npmrunlint"上面第二条这条命令定义预提交生命周期并执行npmrunlint命令。在packgae.json中定义lint命令，使用eslint检测src文件夹下的文件，当然可以检测任何文件。"scripts":{"lint":"eslintsrc"},Step2:添加commit信息验证我们验证commit信息最简单的方法就是依赖commitlint包。yarnadd@commitlint/config-conventional@commitlint/cli-D在根目录新建commitlint.config.js，写入如下内容：module.exports={extends:["@commitlint/config-conventional"]};添加检查提交钩子：npxhuskyadd.husky/commit-msg'npx--no-installcommitlint--edit"$1"'上面命令的意思是创建一个commit-msg钩子文件，内容为npx--no-installcommitlint--edit"$1"。commitlint命令检查$1参数的值是否合法，$1就是我们的gitcommit-m${1}。校准标准请参考规范文档这里我只列出最常用的：标准用法docsgitcommit-m"docs:updatexxxdocument"featgitcommit-m"feat:addxxxmodule"fixgitcommit-m"fix:Fixed网上xxxxbug"stylegitcommit-m"style:更新用户信息弹出框的样式"testgitcommit-m"test:修改添加用户按钮的测试用例"和你项目中的配置不一样？有的同学可能会发现我这里写的方式可能和你项目中的写法不一致。你的项目可能会这样写：{"husky":{"hooks":{"pre-commit":"npmruntest","commit-msg":"commitlint-e$HUSKY_GIT_PARAMS"}}}上面的写法method是husky^6版本之前的写法，现在husky已经更新到7版本了，以后可能不会再用这种写法配置新项目了。git的hookGit官网描述了hooks2.///这个注释的使用我们会在react项目代码中看到下面的注释，那么这个奇怪的注释是干什么用的呢？///原来///的这种写法主要用在.d.ts文件中，作用是引入其他.d.ts文件。比如我需要用到一个xxx.d.ts文件，但是这个没有放在node_modules/@types中，所以系统默认是不会导入的。ts官网给出的解释3.推荐一个reactguide插件引导插件地址一般第一次访问网站会有引导操作，使用guide可以轻松实现。让我们一步一步来配置它：yarnaddbyte-guide使用这个插件的中心思想是，我们以数组的形式传入一组配置，找到包含target等信息的配置要挂载的dom，和显示的copy，然后每次点击下一步，就可以执行数组中的对象：importGuidefrom"byte-guide";exportdefaultfunctionHome(){constSEARCH={hotspot:true,title:"SearchComponent",selector:"#search",placement:"top-left",content:

这个搜索组件很强大

,偏移量:{x:20},};constTOTAL={title:"Totallist",parent:"#search",selector:"#total",placement:"right",content:"这里是列表总数。",};return(目标1

目标2

<指南lang="zh-cn"localKey="uni-key"className="my-guide"steps={[SEARCH,TOTAL]}onClose={()=>{console.log("点击关闭");}}afterStepChange={(nextIndex,nextStep)=>{console.log("ClickNext");}}/>

);}主要属性说明localKey：我们bootstrap组件的显示一般只是用户的第一个login只显示，或者在用户点击向导的结束按钮时永远不会显示，向导会将向导组件是否需要显示的值存储在LocalStorage中，所以这里定义了存储的键名.placement定义了弹出框所在的位置，比如top元素，我们会选择使用bottom等属性，虽然offset设置为placement，但是难免位置不尽如人意，所以可以使用这个属性来重新调整引导框的位置。注意组件内置了一个简单的国际化，即当我们不指定文案时，它会根据传入的语言英文、中文、日文更改文案。这个插件有一个bug，如果两个元素都处于父元素的内部滚动状态，会出现定位偏差问题很大，所以如果你的bootstrap项目涉及内部滚动的元素，不建议使用这个插件滚动。4.eslintversion7之后，可以注释发现团队项目中难免会出现/*eslint-disable*/这样的注释。每次看到都会尝试删除，但是可能会引起一系列的链式翻译。在这种情况下，如果我们使用的是eslint^7及以上版本，我们可以添加注释解释为什么必须在此处使用/*eslint-disable*/。//eslint-disable-next-linea-rule--这里的错误无法修复！上面的写法比较友好，因为毕竟这种禁止eslint检测的方法不推荐大家使用。如果一定要用，需要在开头说明理由。5、统一导出一个索引文件的优缺点比如我们有很多工具和方法在同一个文件夹下，a.js文件导出a1、a2等方法。我们经常使用一个index.js文件来统一导出，project会有很多种写法如下：export*from'./a';export*from'./b';export*from'./c';从'./d'导出*；我们很在意“优雅”，但是也有很多缺点，这里我们罗列一下：1：exportnamesmayberepeat你需要注意每次修改索引文件是否报错。2：找代码路径麻烦这是对操作最不友好的一点。比如我们在某个页面有一个外部导入的方法。如果我们是Mac电脑，点击`command+鼠标左键可以找到这个方法源码，但是往往只能在index.js中找到，这里并没有显示具体的方法名，所以需要每个文件都重新输入查询。3：修改export没有提示当我们修改一个export时，没有提示使用这种方法的文件可能会被忽略，因为不启动项目gitpush也可以通过测试。4：ts类型的二次推导有时你命名并导出了一个方法函数，但是eslint报错说没有导出该成员，但是当我们进入这个方法的文件夹后，eslint错误就消失了，这样的Bad经历都是有关系的到这种写作方式。六、svgr库转换svg图片，filter:drop-shadowxxx.svg这些文件不好控制，我们要动态导入很多配置可能需要使用svgr库将svg图片转换成react的形式组件，通过如下命令可以在命令行生成代码数据：npx@svgr/cli--icon图片地址。命令行生成svg肯定不是工程，其实各种脚手架都内置了这个svgr库，所以我们其实就是这样，这样就可以在组件模式下使用svg图片了。import{ReactComponentasLogo}from"./logo.svg";//....一句filter:"drop-shadow(red20px0)"可以让svg变红，具体我会单独出一篇文章。7.Yarnresolutions管理依赖多个项目的包项目会引用很多npm包。比如我们的项目依赖A包，A包本身又依赖^3.1.5版本的B包。我们项目本身有yarnaddB安装了版本^3.0.5的B包。这时候B包其实是通用的，没必要参考两个版本。而如果打包的话，由于我们两处依赖的B包版本不同，所以包体积会变大，所以yarn提供了resolutions配置项，我们可以配置如下（package.json）："resolutions":{"B":"^3.1.5"}举个实际的例子，我们新建一个项目npxcreate-react-appprojectnameintotheprojectyarnlist--depth=1列出项目的依赖，并且只打印一级依赖是的，我们以workbox-build为例：我们在外层package.json中配置："resolutions":{"fs-extra":"^4.0.2"}这时候，执行yarn命令，这里yarnlist--depth=1打印：上面的依赖发生了变化，不仅仅是在workbox-build包下。8.pnpm代替yarnlean进行包管理我们经常使用yarn+lean来管理子项目，但是pnpm更适合传输中的这项工作，那么为什么pnpm更适合它呢？yarn管理node_modules的机制会导致如果B包依赖包，那么B包的文件位置会和A包在同一层级，导致开发者虽然不执行yarnaddB,importBfrom'B'也可以引入到项目中，埋头开发。隐患。pnpm采用的方式是对包进行统一管理，将类似的软链接存放在单个项目的node_modules文件中，这样就不会重复安装某个依赖，也不需要把B和同级别的A，没有莫名其妙的引入B包。当我们的子项目很多，依赖越来越复杂的时候，pnpm的优势就体现出来了。9、微前端子应用，如何分别启动?微前端应用会有若干个子项目，而这些子项目往往依赖于一个主项目（shell项目），主项目负责分发一些复用的资源，比如reactreact-router等等公共依赖，主项目中的一些自定义的utils工具方法也会传递给子项目。由于需要主项目分配的资源较多，子项目很难独立运行。我们每次至少要启动主项目+子项目，需要启动剩下的所有子项目才能看到完整的项目。但是有什么办法可以只启动子项目本身呢？我这里做的是使用请求的代理，因为大多数微前端框架的原理是每个子项目都是一个js文件，主应用启动后按需加载子项目的js入口文件，那么我们就可以访问在线测试环境的地址，然后找到在线测试环境的主应用访问子应用的url，然后将这个url代理到本地启动子项目的地址。这样做的好处是子项目可以完全处于在线环境下的主应用上下文中，不需要启动其他子项目。请注意，子项目的css文件也应被代理。end???????这次就到此为止吧，希望和大家一起进步。