前端工程化相关工具和技巧

发布于 2022-10-17 20:33:06 字数 4528 浏览 170 评论 0

1. 用 husky 和 lint-staged 构建 Git commit 代码检查工作流

husky 安装后，可以很方便的在 package.json 配置 git hook 脚本。

待提交的代码 git add 添加到暂存区；
执行 git commit；
husky 注册在 git pre-commit 的钩子函数被调用
接下来可以做一些 Eslint，commit log 校验

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },

pre-commit 只 Lint 改动的

Feedly 的工程师 Andrey Okonetchnikov 开发的 lint-staged 就是基于这个想法，其中 staged 是 Git 里面的概念，指待提交区，使用 git commit -a，或者先 git add 然后 git commit 的时候，你的修改代码都会经过待提交区。那么就可以在这里做 lint 操作。

commitlint 规范 commit log

commit-msg 搭配 commitlint，它可以帮助我们 lint commit messages，如果我们提交的 log 不符合规范，直接拒绝提交。可以在 config 配置文件中优化相关信息。

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'scope-case': [2, 'always', ['lower-case', 'pascal-case', 'camel-case']],
    'subject-case': [2, 'never', []]
  }
};

2. conventional-changelog-cli 生成 changeLog

目前我们的工作量和他们类似：

Recommended workflow

Make changes
Commit those changes
Make sure Travis turns green
Bump version in package.json
conventionalChangelog
Commit package.json and CHANGELOG.md files
Tag
Push

如我们项目中 package.json script 中{ "bump": "SKIP_TAG=true npm run release"}，去执行5、6、7、8的操作。

Eslint & Prettier

Eslint 是一个linter，支持 auto fix，prettier 是一个 formatter。

eslint 与 prettier 是有一些配置冲突的，可以用相关插件来解决冲突。如 eslint-config-prettier、eslint-plugin-prettier。

eslint-plugin-prettier 插件会调用 prettier 对你的代码风格进行检查，其原理是先使用 prettier 对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被 prettier 进行标记。eslint-plugin-prettier 也可以将 prettier 的错误提交给 eslint，通过 eslint 来提示错误。

通过使用 eslint-config-prettier 配置，能够关闭一些不必要的或者是与 prettier 冲突的 lint 选项。这样我们就不会看到一些 error 同时出现两次

开发中我使用 vscode 编码，通过 vscode 配置（注意不需要启用 editor.formatOnSave 选项）：

“eslint.autoFixOnSave”: true

lint 发展史

JSLint 的问题是所有的代码风格和规则都是内置好的，Douglas Crockford 不会向开发者妥协开放配置或者修改他觉得是对的规则。

Anton Kovalyov 吐槽：「JSLint 是让你的代码风格更像 Douglas Crockford 的而已」，并且在 2011 年 Fork 原项目开发了 JSHint。

JSHint 的特点就是可配置，同时文档也相对完善，而且对开发者友好。很快大家就从 JSLint 转向了 JSHint。

2013 年的 6 月份，Zakas 发布了全新的 lint 工具——ESLint。是基于 AST 的 lint，可以动态执行额外的规则，同时可以很方便的扩展规则。利用 AST 处理规则，用 Esprima 解析代码，执行速度要比只需要一步搞定的 JSHint 慢很多。

真正让 ESLint 逆袭的是 ECMAScript 6 的出现。ESLint 可扩展的优势一下就体现出来了，不仅可以扩展规则，甚至连解析器也能替换。Babel 团队就为 ESLint 开发了 babel-eslint 替换默认解析器，让 ESLint 率先支持 ES2015 语法。

webpack

1. how-to-write-a-plugin 、Webpack 原理 - 编写 Plugin

2. Loader 和 Plugin

Webpack 将一切文件视为模块，webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 Loader的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。
Plugin可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

3. webpack 的构建流程

初始化参数，从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
开始编译，用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
确定入口，根据配置中的 entry 找出所有的入口文件
编译模块，从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
完成模块编译，在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
输出资源
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
编译流程可以参考：webpack 编译流程

4. 提高 webpack 的构建速度

多入口情况下，使用 CommonsChunkPlugin 来提取公共代码
通过 externals 配置来提取常用库
利用 DllPlugin 和 DllReferencePlugin 预编译资源模块，通过 DllPlugin 来对那些我们引用但是绝对不会修改的 npm 包来进行预编译，再通过 DllReferencePlugin 将预编译的模块加载进来
使用 Happypack 实现多线程加速编译
使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度
原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度使用 Tree-shaking 和 Scope Hoisting来剔除多余代码