skip to content
静修记

项目初始化的一些实践

/ 7 min read

eslint, typescript, prettier, husky, lint-staged, commitlint, 工程化，代码规范，提交规范

包管理器的选择

根据项目需要，我们选择 pnpm 的 workspace 用以实现简单的 monorepo

why pnpm

  1. 高效的磁盘空间利用：

    • 去重机制：pnpm 通过一种独特的方式在全局存储区内维护软件包的副本，不会为每个项目分别下载和存储依赖。这样，多个项目共享相同版本的依赖，大大减少了磁盘空间的使用。
    • 符号链接：pnpm 使用符号链接将项目中的依赖链接到全局存储区的实际文件，这不仅节省了空间，还加快了安装速度。

  2. 快速安装：

    • 增量安装：pnpm 可以高效地处理依赖的增量安装，只有在依赖有变化时才会重新下载和安装，极大地缩短了安装时间。
    • 并行处理：pnpm 在安装依赖时会并行处理任务，提高了安装速度。

  3. 一致的依赖树：

    • 严格依赖解析：pnpm 强制依赖项必须满足其声明的依赖关系，这避免了不同环境下由于依赖解析不一致而导致的问题。
    • 避免幽灵依赖：幽灵依赖（即未明确声明的隐式依赖）在 pnpm 下不会被自动安装，从而确保了依赖关系的明确和可控。

  4. 良好的性能：

    • 高效的网络请求：pnpm 会将重复的网络请求进行缓存，从而减少了对网络的依赖和时间消耗。
    • 优化的包存储：pnpm 的全局存储区机制确保了包存储和检索的效率，使得安装过程更加流畅。

  5. 易于维护和升级：

    • 快速版本切换：由于 pnpm 的符号链接机制，切换不同版本的依赖变得非常简单和快速。
    • 独立的包版本：pnpm 能够确保每个项目使用独立的包版本，从而避免了全局依赖冲突。

  6. 兼容性：

    • 与 npm 兼容：pnpm 完全兼容 npm 的 package.json 和命令，使得从 npm 迁移到 pnpm 非常容易。
    • 支持 monorepo：pnpm 对 monorepo（单仓库多包）项目有很好的支持，能够有效管理和优化多个包之间的依赖关系。

具体的步骤

1. 初始化 package.json

Terminal window
pnpm init

2. 创建 pnpm-workspace.yaml 文件，添加如下代码

packages:
  - 'packages/*' // 用以声明 workspace 在 packages 目录下

3. 添加 eslint

我们先看官网上推荐的方式 eslint 但是我们使用的 pnpm，可以直接使用 pnpm dlx eslint --init,也会跳转到交互流程

我们选择 node 模式、typescript、不使用框架 alt text 但是会报错。因为我们使用 pnpm 的 workspace，所以需要单独安装，执行以下命令

Terminal window
pnpm add -w -D eslint globals @eslint/js typescript-eslint // -w 表示根工作区 -D 是 --save-dev 的缩写

这里还想提一下 npm init 的用法。直接控制台输出注释。 alt text 所以这里应该是执行了 npx eslint —init。这也是为啥 pnpm dlx eslint —init 能呼出交互流程

4. 安装 Prettier

prettier 官网的文档还没有更新，目前 eslint V9 我们已经不在需要当独配置 eslint，以解决 eslint 和 prettier 的冲突，也就无需安装 eslint-config-prettier 和 eslint-plugins-prettier。执行以下命令

Terminal window
pnpm add -w -D prettier

配置 prettier 的配置文件。我们选择 .prettierrc.json，粘贴以下代码（可以自己配置自己喜欢的风格）

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

5. 配置 Husky

直接参考官网 alt text

不要忘记加 -w

执行完 husky init，会生成 .husky 文件 alt text package.json 会添加 prepare 钩子脚本，其他人安装依赖的时候会执行 husky 命令 alt text

6. 配置 lint-staged

lint-staged 对暂存的文件执行相关脚本。我们需要利用这个包对提交的代码进行强制格式化，保持代码风格统一。

安装

Terminal window
pnpm add lint-staged -D -w

在 package.json 里面添加相关命令

Terminal window
"lint-staged": {
    "*.{js,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "eslint --fix",
      "prettier --write"
    ]
  },

在 husky 的 pre-commit 勾子中添加 pnpm lint-staged alt text

7. 配置 Commitlint

根据官网走默认配置就好

  1. 安装
Terminal window
pnpm add --save-dev -w @commitlint/{cli,config-conventional}
  1. 配置 commitlint.config.js

mac 直接通过 linux 命令生成

Terminal window
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
  1. 写入 Husky
Terminal window
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

8. 配置打包工具 rollup

  1. 安装 rollup
Terminal window
pnpm add rollup -D -w
  1. 创建 script/rollup 文件夹用以后面根据项目配置 rollup alt text

总结

本章我们通过对 ESLint、Prettier、Husky、lint-staged 和 Commitlint 等工具库的学习，让我们对项目工程化有了一定的了解。并且通过这些配置，可以确保我们提交的消息始终符合规范，并在每次提交代码之前自动检查和修复代码格式问题。这样可以大大提高代码质量和项目的可维护性。当然了市面上已经存在各种脚手架帮我们完成这些工作，但是自己摸索一遍会对项目工程化的理解更为深刻，值得我们去动手敲一下。