1. 初始化

酒玖
98 阅读3分钟

1. Multi-repo和Mono-repo

  • Multi-repo 每个库有自己独立的仓库，逻辑清晰，相对应的，协同管理会更繁琐。
  • Mono-repo 可以很方便的协同管理不同独立的库的生命周期，相对应的，会有更高的操 作复杂度。

参考资料：现代前端工程为什么越来越离不开 Monorepo?

2. pnpm

pnpm的依赖安装使用的是links，并且可以更好的处理幽灵依赖的问题。

  1. 安装 | pnpm
  2. 使用pnpm初始化项目：pnpm init
  3. 根目录下创建pnpm-workspace.yaml，并在项目根目录下创建packages文件夹，后续所有的项目都会被放到此文件夹下。

参考资料：pnpm是凭什么对npm和yarn降维打击的

3. eslint

使用eslint进行代码语法的问题发现。

  1. pnpm安装eslint：pnpm add -D eslint
  2. 初始化eslint：npx eslint --init -w
  3. 在项目中安装 TypeScript 的解析器和插件：pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

执行上述命令后，初始化生成了一个eslint.config.mjs文件，内容如下

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";


export default [
  {files: ["**/*.{js,mjs,cjs,ts}"]},
  {files: ["**/*.js"], languageOptions: {sourceType: "script"}},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

4. prettier

使用Prettier进行代码风格的约束

  1. 执行pnpm add -D -w prettier eslint-config-prettier eslint-plugin-prettier安装prettier和eslint插件

    • prettier：主库。
    • eslint-config-prettier：用于关闭 ESLint 中与 Prettier 冲突的规则。
    • eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，可以在 ESLint 中直接报告 Prettier 的格式问题。

  2. 在eslint.config.mjs 文件中，确保添加 Prettier 的规则配置。

    import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import prettierPlugin from "eslint-plugin-prettier";
import prettierConfig from "eslint-config-prettier";

export default [
  { files: ["**/*.{js,mjs,cjs,ts}"] },
  {
    languageOptions: {
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
    plugins: {
      prettier: prettierPlugin, // 加载 Prettier 插件
    },
    rules: {
      "prettier/prettier": "error", // 使用 Prettier 的规则来强制格式化
      ...prettierConfig.rules, // 应用 Prettier 的推荐规则
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

  3. 根目录下添加.prettierrc文件

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

5. commit

使用husky拦截commit命令

  1. 安装husky：pnpm add -D -w husky
  2. 启用husky的git hooks：npx husky install，这将创建一个 .husky 文件夹，并在其中设置 Git hooks。
  3. 在package.json中添加"lint": "eslint --fix --quiet ./packages"
  4. 执行npx husky add .husky/pre-commit "pnpm lint"在 .husky 文件夹中创建一个 pre-commit 文件，用于在每次提交前运行 ESLint。如果命令不可用，执行以下步骤
    • 执行touch .husky/pre-commit手动创建文件
    • 打开 .husky/pre-commit 文件，添加以下内容： 
      pnpm lint
    • 执行chmod +x .husky/pre-commit确保 .husky/pre-commit 文件是可执行的

在husky已经安装的基础上，使用commitlint来对提交信息进行检查

  1. 安装commitlint：pnpm add -D -w @commitlint/{config-conventional,cli}
  2. 在项目根目录下创建一个 commitlint.config.js 文件，内容如下： 
    module.exports = { 
  extends: ['@commitlint/config-conventional'], 
};
  3. 添加commit-msg hook 在 .husky 文件夹中添加一个 commit-msg 钩子，以便在提交信息时运行 commitlint 
    npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
    如果命令不可用，执行以下步骤
    • 执行touch .husky/commit-msg手动创建文件
    • 打开.husky/commit-msg文件，添加以下内容： 
      npx --no-install commitlint --edit "$1"
    • 执行chmod +x .husky/commit-msg确保 .husky/commit-msg 文件是可执行的

6. tsconfig.json

项目根目录下新增tsconfig.json，内容如下：

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": false,
    "skipLibCheck": true,
    "baseUrl": "./packages"
  }
}

7. 打包工具的选择

比较不同打包工具的区别 参考资料：Overview | Tooling.Report。 React源码库的特点： 是库，而不是业务项目 希望工具尽可能简洁、打包产物可读性高 原生支持 ESM

执行命令pnpm add -D -w rollup，并在根目录下创建scripts/rollup文件夹

8. git

feat: 初始化

avatar
文章
阅读
粉丝