关于前端:解决前端开发中的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 x64
yarn/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.js
C:\...\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 为 pnpm 包管理器组织开源限度计划，only-allow 外部应用 which-pm-runs 来获取以后执行的包管理器后再进行判断拦挡，仅需在装置依赖后调整 scripts 中的内容即可，在 vite 我的项目中有应用。

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

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

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

装置依赖：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"。

卸载依赖：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：

// 如需强制执行要减少参数 --force
npx 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 后将启动交互来生成提交信息，提交前请将待提交文件增加到暂存区。

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

当咱们习惯应用对立的标准后就会感觉 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；
。。。

待收集的信息:

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,
  }，}

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}}

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

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：

自定义配置：

写在最初

团队介绍