关于前端:解决前端开发中的5大痛点

前言：

通过浏览本文你理解到这5大痛点如何防止和解决：

如何优雅且疾速的切换Node版本？
如何对立我的项目中包管理器的应用？
如何养成标准GitCommit编写习惯？
如何不Copy疾速开发类似的页面/组件？
如何编写CSS会让共事更违心浏览？
Node版本管理器：
为什么要治理Node版本？
当咱们开发的我的项目变得多起来的时候你就会发现每个我的项目所依赖的NodeJs环境的版本会相差很大，因为新我的项目的搭建咱们必定是会抉择更加稳固的最新版本，那么当咱们须要对历史我的项目进行保护的时候就免不了要切换到过后的NodeJs版本。
当咱们想要尝鲜一些Bate版本的NodeJs所带来的新个性的时候就须要一个Bate版的NodeJs环境。
如何实现Node版本切换？
回绝反复下载，反复装置；
举荐应用工具：nvm-windows，nvm。
理论案例分享：
在一次JavaScript脚本问题修复中发现本来失常应用的fs.writeFile函数抛出了类型异样导致数据无奈失常输入到文件，在查问API后发现fs.writeFile(file, data[, options], callback)函数的callback参数在v7.0.0中被标记为须要必选，在v10.0.0中被要求强制必选。导致这次故障的起因就是在降级NodeJs版本的时候没有思考到对历史我的项目影响，并在切换NodeJs版本到v10以下后验证了这一问题。
装置阐明：
因为团队中应用win零碎为大多数，这里还是次要来介绍win环境的装置；
装置前为了防止抵触，请先卸载已装置的NodeJs，并查看上面这几个目录；
1. 须要清空：%ProgramFiles%\nodejs；
2. 须要清空：%UserProfile%\.npmrc；
3. 倡议备份：%AppData%\npm\etc\npmrc至%UserProfile%\.npmrc。
下载nvm-windows并按默认举荐装置，装置后重启终端通过nvm version查看版本验证装置后果；
留神须要应用管理员权限关上终端。
常用命令介绍：
查看已装置的NodeJs：nvm list [available]；
装置指定版本的NodeJs：nvm install <version> [arch]；
卸载已装置的NodeJs：nvm uninstall <version>；
切换NodeJs版本：nvm use [version] [arch]。
更多请参考下图：

标准包管理器应用：

同样是在合作开发中发现的问题，因为应用了不同的包管理器，导致在本地开发环境一切正常的代码推送近程后在服务器构建中却意外的失败了，但在其余共事的电脑中再次尝试本地构建是能够复现问题的，这是为什么呢？咱们在最初查看node_module中的内容时发现，因为应用的不同的包管理器导致文件拉取呈现了差异最终导致的这个问题。这里咱们通过一份预装置脚本来限度应用雷同的包治理。

预装置脚本工作原理介绍：

通过在install正式执行前通过在过程中获取能够区别以后应用的包管理器的非凡标识来决定是容许还是中断执行。

包管理器标识获取：

UserAgent计划，利用案例是which-pm-runs；

标识获取：process.env.npm_config_user_agent

输入后果：npm/6.14.5 node/v14.17.1 win32 x64yarn/1.22.10 npm/? node/v14.17.1 win32 x64

// UserAgent计划的残缺脚本// 定义对立包管理器const allowPM = 'yarn'const userAgent = process.env.npm_config_user_agent || ''if (userAgent !== '') {  const pmName = userAgent.substring(0, userAgent.indexOf('/'))  if (pmName !== allowPM) { console.warn(   `\u001b[33m This repository requires using ${allowPM} as the package manager for scripts to work properly.\u001b[39m\n` ) process.exit(1)  }}

ExecPath计划，利用案例是vue-next；

标识获取：process.env.npm_execpath

输入后果：C:\...\nvm\v14.17.1\node_modules\npm\bin\npm-cli.jsC:\...\npm\node_modules\yarn\bin\yarn.js

const allowPM = 'yarn'const execpath = process.env.npm_execpath || ''if (!new RegExp(`${allowPM}`).test(execpath)) {  console.warn( `\u001b[33m This repository requires using ${allowPM} as the package manager for scripts to work properly.\u001b[39m\n`  )  process.exit(1)}

举荐计划only-allow：

only-allow为pnpm包管理器组织开源限度计划，only-allow外部应用which-pm-runs来获取以后执行的包管理器后再进行判断拦挡，仅需在装置依赖后调整scripts中的内容即可，在vite我的项目中有应用。

增加命令：npm set-script preinstall "npx only-allow yarn"。
1. 命令执行须要npm版本在v7+；
2. 装置仅此一步。
当应用了其余的包治理执行install命令将会被中断。

GitCommit标准：

恪守GitCommit的通用标准是每个优良我的项目比不可少的环节，不同的我的项目需要中会衍生更多的依赖项须要配置，这里咱们通过介绍husky7、commitizen/cz-cli、commitlint三大套件的根底应用来让你疾速上手拦挡住不标准的Commit信息。

三大件套介绍（husky7+commitizen+commitlint）：

husky7：在git执行的生命周期进行hook，代替git自带的hooks；
commitizen/cz-cli：通过交互的形式生成标准的GitCommit信息；
commitlint：查看GitCommit信息是否标准。

husky7使用指南：

筹备工作：

装置依赖：npm install husky --save-dev；
减少prepare命令：
1. npm set-script prepare "husky install"；
2. 留神：npm set-script xxx在npm7+失效。
初始化husky：npm run prepare，生成.husky默认文件夹。
创立Hook：
创立Hook命令格局：husky add <file> [cmd]；
创立Hook命令，在git commit前执行npm test：
1. 批改test命令：输入hello world文本到output.txt文件。
2. npx husky add .husky/pre-commit "npm test"；
3. 留神：如果执行后仅看到的是帮忙提醒，能够应用已装置到本地的husky来运行（.\node_modules\.bin\husky），这个问题已在npm8中失去了修复。
  验证hook：
增加暂存：git add .husky/pre-commit；
执行提交：git commit -m "Keep calm and commit"。

卸载hook：

卸载依赖：npm uninstall husky；
解除Git配置：git config --unset core.hooksPath。
更多请参考下图：
commitizen/cz-cli使用指南：
约定提交音讯（AngularJS）：

约定变更日志：conventional-changelog，同时会波及standard-version、semantic-release、workflow等，非本次介绍；
前提约定：确保npm版本在5.2及以上。
初始化并应用生成Commit信息：

为我的项目初始化cz-conventional-changelog：

// 如需强制执行要减少参数--forcenpx commitizen init cz-conventional-changelog --save-dev --save-exact

增加执行脚本：
1. npm set-script cm "cz"；
2. 不举荐应用commit做为key，可能存在抵触导致反复执行，详见文档；
3. npm set-script执行须要npm7+。
执行npm run cm后将启动交互来生成提交信息，提交前请将待提交文件增加到暂存区。

应用husky7买通git commint和cz-cli ：

创立./husky/prepare-commit-msg ：
1. npx husky set .husky/prepare-commit-msg 'exec < /dev/tty && git cz --hook || true'。
触发git commit后将进入交互命令。

commitlint使用指南：

当咱们习惯应用对立的标准后就会感觉CLI的形式很慢，这时候咱们就能够勾销到原有的pre-commit中的拦挡，改用只进行校验的形式来防止偶然呈现的不标准状况。

装置步骤：

装置必要依赖：

npm install --save-dev @commitlint/config-conventional @commitlint/cli

生成配置文件：

// 留神：如果文件内容编码非UTF-8请批改，在windows中可应用记事本从新另存为UTF-8格局。echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

创立一个提交信息校验的hook：
```
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
```
验证是否能够触发：
验证HEAD~1到HEAD提交是否标准（源文档命令执行会产生谬误）:
```
npx commitlint -- --from HEAD~1 --to HEAD --verbose
```
实际操作GitCommit：
正确示范：

谬误示范：

组件级模板开发：

一些开源我的项目为了在被应用时能够轻松的上手或缩小反复配置都会提供一份最根底的我的项目模板并配置相应的CLI工具进行拉取创立，在理论我的项目开发中咱们也能够用相似的思维来帮忙咱们疾速创立页面，组件，路由，控制器等。

筹备环境：

装置开发依赖：npm i plop --save-dev；
减少Scripts：npm set-script new "plop";
举荐目录构造：
```
|-- project name |-- plopfile.js |-- plop-templates |   |-- sfc3 |       |-- index.hbs |       |-- prompt.js
```
阐明：咱们在plop-templates定义的各个模板在导出后均要在plopfile.js集中注册失效。

第一个组件模板：

Vue的单文件组件将代码宰割成template、script、style三块，其中template、style的编写格调相差不大。然而在script局部的编写Vue3就会有一些区别：

应用默认导出创立组件；
应用setup方言创立组件；
组件编写应用了defineComponent；
组件编写应用了reactive；
组件编写应用了Ts；
。。。

prompt.js脚本，负责收集用户的操作并汇总答案：

待收集的信息:

Please enter a component name：
Please check the required block：
Please select a type：

Set scoped ?

收集后处理：

const actions = { // 本次须要减少一个模板  type: "add",  // 输入组件的目录  path: `src/components/${name}/index.vue`,  // 生成组件的模板定义  templateFile: "plop-templates/sfc3/index.hbs",  // 收集到得数据  data: { name, // 是否蕴含template template: blocks.includes("template"), // 是否蕴含style style: blocks.includes("template"), // 是否蕴含script script: blocks.includes("script"), default: type === "default", setup: type === "setup", reactive: type === "reactive", scoped: scoped,  }，}

index.hbs模板，负责构建组件的每一块：

Handlebars是一个轻量的语义化模板，咱们通过把握一些简略的模板语法就能够失常应用，除非你要构建更加简单的组件模板，那么你能够深刻学习一下。

文本渲染：

应用{{ xxx }}的模式间接渲染。

条件判断：

条件判断助手代码块开始为{{#if xxx}}，完结为{{/if}}，当template为true时渲染两头的内容。

{{#if template}}<template>  <div>  </div></template>{{/if}}

能够应用Plopjs内置的Case Modifiers，疾速转换变量命名格调：

camelCase: changeFormatToThis
snakeCase: change_format_to_this
dashCase/kebabCase: change-format-to-this
dotCase: change.format.to.this
pathCase: change/format/to/this
properCase/pascalCase: ChangeFormatToThis
lowerCase: change format to this
sentenceCase: Change format to this,
constantCase: CHANGE_FORMAT_TO_THIS

titleCase: Change Format To This

示例模板：

{{#if template}}<template><div></div></template>{{/if}}{{#if script}}<script>export default {setup () {  return {}}}</script>{{/if}}{{#if style}}<style{{#if scoped}} scoped{{/if}}></style>{{/if}}

CSS属性排序：

在大多数时候咱们都特地在乎JavaScript代码的标准，装置了各式各样的校验工具，同样在CSS外面也应该有一份相似的标准来对编写做肯定的限度，这样能够防止反复定义的款式被笼罩的状况，也体现了在编写款式时的思路，同样也进步的CSS的浏览性和维护性。

CSScomb for VSCode：

CSScomb是一款专一于CSS、Less、SCSS或Sass的编码款式格式化程序。

自定义配置：

CSS排序程序：布局 → 尺寸 → 界面 → 文字 → 交互；
自定义配置文件：VSCode → 设置 → 工作区 → 右上角关上设置（json）；

残缺配置，倡议在工作区应用，配置来自JowayYoung：

// .vscode/settings.json{ "csscomb.formatOnSave": true, // 保留代码时主动格式化 "csscomb.preset": {     "always-semicolon": true, // 分号结尾     "block-indent": "\t", // 换行格局     "color-case": "lower", // 色彩格局     "color-shorthand": true, // 色彩缩写     "element-case": "lower", // 元素格局     // "eof-newline": false, // 结尾空行     "leading-zero": false, // 保留前导零位     // "lines-between-rulesets": 0, // 规定距离行数     "quotes": "double", // 引号格局     "remove-empty-rulesets": true, // 剔除空规定     "space-between-declarations": "\n", // 属性换行     "space-before-closing-brace": "\n", // 后花括号前插入     "space-after-colon": " ", // 冒号后插入     "space-before-colon": "", // 冒号前插入     "space-after-combinator": " ", // 大于号后插入     "space-before-combinator": " ", // 大于号前插入     "space-after-opening-brace": "\n", // 前花括号后插入     "space-before-opening-brace": " ", // 前花括号前插入     "space-after-selector-delimiter": "\n", // 逗号后插入     "space-before-selector-delimiter": "", // 逗号前插入     "strip-spaces": true, // 剔除空格     "tab-size": true, // 缩进大小     "unitless-zero": true, // 剔除零单位     "vendor-prefix-align": false, // 前缀缩进     "sort-order": [         // 布局属性         "display", "visibility", "overflow", "overflow-x", "overflow-y",         // 布局属性：浮动         "float", "clear",         // 布局属性：定位         "position", "left", "right", "top", "bottom", "z-index",         // 布局属性：列表         "list-style", "list-style-type", "list-style-position", "list-style-image",         // 布局属性：表格         "table-layout", "border-collapse", "border-spacing", "caption-side", "empty-cells",         // 布局属性：弹性         "flex-flow", "flex-direction", "flex-wrap", "justify-content", "align-content", "align-items", "align-self", "flex", "flex-grow", "flex-shrink", "flex-basis", "order",         // 布局属性：多列         "columns", "column-width", "column-count", "column-gap", "column-rule", "column-rule-width", "column-rule-style", "column-rule-color", "column-span", "column-fill", "column-break-before", "column-break-after", "column-break-inside",         // 布局属性：格栅         "grid-columns", "grid-rows",         // 尺寸属性   "box-sizing","margin","margin-left","margin-right","margin-top","margin-bottom","padding","padding-left","padding-right","padding-top","padding-bottom","border","border-width","border-style","border-color","border-colors","border-left","border-left-width","border-left-style","border-left-color","border-left-colors","border-right","border-right-width","border-right-style","border-right-color","border-right-colors","border-top","border-top-width","border-top-style","border-top-color","border-top-colors","border-bottom","border-bottom-width","border-bottom-style","border-bottom-color","border-bottom-colors","border-radius","border-top-left-radius","border-top-right-radius","border-bottom-left-radius","border-bottom-right-radius","border-image","border-image-source","border-image-slice","border-image-width","border-image-outset","border-image-repeat","width","min-width","max-width","height","min-height","max-height",   // 界面属性   "appearance","outline","outline-width","outline-style","outline-color","outline-offset","outline-radius","outline-radius-topleft","outline-radius-topright","outline-radius-bottomleft","outline-radius-bottomright","background","background-color","background-image","background-repeat","background-repeat-x","background-repeat-y","background-position","background-position-x","background-position-y","background-size","background-origin","background-clip","background-attachment","bakground-composite","background-blend-mode","mask","mask-mode","mask-image","mask-repeat","mask-repeat-x","mask-repeat-y","mask-position","mask-position-x","mask-position-y","mask-size","mask-origin","mask-clip","mask-attachment","mask-composite","mask-box-image","mask-box-image-source","mask-box-image-width","mask-box-image-outset","mask-box-image-repeat","mask-box-image-slice","box-shadow","box-reflect","filter","mix-blend-mode","opacity","object-fit","clip","clip-path","resize","zoom","cursor","pointer-events","touch-callout","user-modify","user-focus","user-input","user-select","user-drag",   // 文字属性   "line-height","line-clamp","vertical-align","direction","unicode-bidi","writing-mode","ime-mode","text-overflow","text-decoration","text-decoration-line","text-decoration-style","text-decoration-color","text-decoration-skip","text-underline-position","text-align","text-align-last","text-justify","text-indent","text-stroke","text-stroke-width","text-stroke-color","text-shadow","text-transform","text-size-adjust","src","font","font-family","font-style","font-stretch","font-weight","font-variant", "font-size", "font-size-adjust", "color",   // 内容属性   "overflow-wrap", "word-wrap", "word-break", "word-spacing", "letter-spacing", "white-space", "caret-color", "tab-size", "content", "counter-increment", "counter-reset", "quotes", "page", "page-break-before", "page-break-after", "page-break-inside",   // 交互属性   "will-change", "perspective", "perspective-origin", "backface-visibility", "transform", "transform-origin", "transform-style", "transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay", "animation", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-play-state", "animation-fill-mode"     ] // 属性排序 }}

减少快捷键优化：

// .vscode/keybindings.json[{ "key": "ctrl+alt+c", // "cmd+alt+c" "command": "csscomb.execute"}]

更多的配置选项可参考阐明文档：csscomb options。

写在最初

通过这一篇的学习就不要再为环境不能平滑切换而放弃新性能的尝鲜了。对立的包管理器也不会再有参差不齐的问题呈现。标准的GitCommit能够为阶段的总结生成日志，平时的查问也会更加不便。组件级别的模板编写能够在长期迭代的我的项目中节省时间，标准编码。同样也不能疏忽CSS也是前端的一部分，良好的构造同样起到了便于浏览和保护的作用。当然在开发过程中还会有一些可能被疏忽掉的痛点，下次整顿后再收回来，也欢送在评论区打出你发现的前端开发痛点还有哪些？✔

团队介绍

高灯科技交易合规前端团队（GFE）, 隶属于高灯科技(北京)交易合规业务事业线研发部，是一个富裕激情、充斥创造力、保持技术驱动全面成长的团队, 团队平均年龄27岁，有在各自畛域深耕多年的大牛, 也有刚刚毕业的小牛, 咱们在工程化、编码品质、性能监控、微服务、交互体验等方向踊跃进行摸索, 谋求技术驱动产品落地的主旨，打造欠缺的前端技术体系。

愿景: 成为最值得信赖、最有影响力的前端团队
使命: 保持客户体验第一, 为业务发明更多可能性
文化: 敢于承当、深刻业务、集思广益、简略凋谢

Github：github.com/gfe-team

团队邮箱：gfe@goldentec.com

作者：GFE(高灯科技交易合规前端团队)

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

前言：

Node版本管理器：

为什么要治理Node版本？

如何实现Node版本切换？

理论案例分享：

装置阐明：

常用命令介绍：

更多请参考下图：

标准包管理器应用：

预装置脚本工作原理介绍：

包管理器标识获取：

举荐计划only-allow：

GitCommit标准：

三大件套介绍（husky7+commitizen+commitlint）：

husky7使用指南：

筹备工作：

创立Hook：

验证hook：

卸载hook：

更多请参考下图：

commitizen/cz-cli使用指南：

初始化并应用生成Commit信息：

应用husky7买通git commint和cz-cli ：

更多请参考下图：

commitlint使用指南：

装置步骤：

验证是否能够触发：

实际操作GitCommit：

组件级模板开发：

筹备环境：

第一个组件模板：

prompt.js脚本，负责收集用户的操作并汇总答案：

待收集的信息:

收集后处理：

index.hbs模板，负责构建组件的每一块：

文本渲染：

条件判断：

能够应用Plopjs内置的Case Modifiers，疾速转换变量命名格调：

示例模板：

CSS属性排序：

CSScomb for VSCode：

自定义配置：

写在最初

团队介绍