开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
模块规范
首先有一个概念：前端工程化和Node密切相关
Web与Node都是一种JS运行环境,web开发更多是ESM编码，二Node开发使用CJS编码
怎么理解模块化？ 一个模块就是一个文件
拆分：将代码根据功能拆分为多个可复用模块
加载：通过指定方式加载模块并执行与输出模块
注入：将一个模块的输出注入到另一个模块
管理：因为工程模块数量众多需管理模块间的依赖关系
为什么要模块化？（优点）
① 隔离作用域
②提供复用性
③提高可维护性
④解决命名冲突
⑤抽离公共代码
模块方案的对比
☆ 目前最多关注：CJS与ESM
-
使用
type指定模块方案- 在
package.json中指定type为commonjs，则使用CJS - 在
package.json中指定type为module，则使用ESM
- 在
-
使用
--input-type指定入口文件的模块方案，与type一样- 命令中加上
--input-type=commonjs，则使用CJS - 命令中加上
--input-type=module，则使用ESM
- 命令中加上
-
支持新文件后缀
.cjs- 文件后缀使用
.cjs，则使用CJS
- 文件后缀使用
mjs文件使用ESM解析，cjs文件使用CJS解析，js文件使用基package.json指定的type解析(type=commonjs使用CJS，type=module使用ESM)
代码规范
代码规范马上想到一个检验工具：Lint
Lint其实就是编辑器中运行的一个脚本进程，将代码解析为抽象语法树，遍历抽象语法树并通过预设规则做一些判断与改动，再将新的抽象语法树转换为正确代码。
怎么做？
部署VSCode的代码格式化
① 安装
# stylelint及其依赖
npm i stylelint stylelint-config-standard stylelint-order postcss-html postcss-scss postcss-less
# eslint及其依赖
npm i @babel/core @babel/eslint-parser @babel/preset-react eslint eslint-config-standard eslint-plugin-html eslint-plugin-import eslint-plugin-n eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-vue vue-eslint-parser
② 配置文件
Stylelint的配置文件可同时校验html/css/scss/less/vue文件；
Eslint需配置不同文件分别校验html/js/ts/jsx/tsx/vue文件
两个插件可在settings.json中通过指定字段覆盖默认配置
- 配置Stylelint可查看Stylelint规则
- 配置Eslint可查看Eslint规则
③ 配置插件
打开VScode - 插件栏 - 搜索安装Stylelint与Eslint
提交规范
就是Git规范
可以了解一下Angular提交规范
① 格式：Header、Body和Footer三个内容（header必填，后两个选填）
<type>(<scope>): <subject>
# 空一行
<body>
# 空一行
<footer>
Header
- type：用于说明
commit的提交类型，必选 - scope：用于说明
commit的影响范围，可选 - subject：用于说明
commit的细节描述，可选
type：
scope：
主要说明你改动的影响度，例如功能上：数据层/视图层/控制层；交互上：组件/布局/流程/视图/页面
subject：
四个字-言简意赅
- 以动词开头
- 使用第一人称现在时
- 首个字母不能大写
- 结尾不能存在句号(
.)
实例：
feat(View): 新增主题皮肤切换按钮
feat(View): new the button for theme skin switching
Body
对subject的详细补充，内容应包括改动动机与改动前后对比。
Footer
该部分只适用两种情况，分别是不兼容变动与问题关闭。
不兼容变动：当前代码与上一版本不兼容，则以BREAKING CHANGE开头，关联变动描述、变动理由和迁移方法
问题关闭：当前代码已修复某些Issue，则以Closes开头，关联目标Issue
② 了解基本规范格式后，当然也可以借助一些工具提高规范效率
commitizen 和 commitlint
