前言

哈喽，我是charlie, 一个前端搬砖工。
从今天开始，我要开始我的摸鱼计划，这个计划涵盖，前端脚手架，组件库，常见框架，服务端渲染，nodejs等等，欢迎大家期待关注。
今天就先从如何搭建项目开始。
开始发车

一项目初始化

这将是一个系列工程，所以我们将使用monorepo repository，至于为啥是monorepo仓库，那不得不套用网上大家的说法，Monorepo是指将多个相关的项目或软件包放在一个Git仓库中管理的软件开发方法。这种方法被广泛应用于大型企业级Web应用程序的开发过程中。这种方法的优点是减少了重复代码，提高了开发效率，使得代码的维护和管理更加容易。我们也是想之后将多个项目放在一个仓库下，然后项目之间还可以相互依赖，方便管理。所以也正合我们的要求，这也是选这种方案的原因。
常见的monorepo 方案有 yarn workspace和lerna，但是我们今天要选择的是pnpm，为啥选择它
借用官网的一句话：Fast, disk space efficient package manager

初始化

pnpm init

创建pnpm-workspace.yaml
该文件定义工作空间

touch pnpm-workspace.yaml

packages:
  - projects/*

mkdir projects

二配置代码校验和规范

俗话说无规矩不成方圆，代码规范也很重要要 😉
通常我们使用elint和prettier做代质量保证和规范校验;

1. 配置eslint

1.1 首先安装elint相关依赖

pnpm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -Dw

1.2 创建.eslintrc文件并进行lint规则配置

touch .eslintrc
cd .eslintrc
#写入下面配置
{
  root: true,
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
      tsx: true
    },
  },
  plugins: ["@typescript-eslint", "prettier"],
  rules: {
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "no-var": "error",
    "prettier/prettier": "error",
    "no-console": "error", "no-debugger": "error"
  }
};

1.3在package.json中添加运行脚本

"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.json --max-warnings 0 --cache",
"lint:fix": "pnpm run lint --fix",

2. 配置prettier

2.1 安装依赖

pnpm i prettier eslint-config-prettier eslint-plugin-prettier -Dw

2.2 创建.prettierrc文件

touch .prettierrc
cd .prettierrc
#写入下面规则
{
  tabWidth: 2,
  jsxSingleQuote: true,
  jsxBracketSameLine: true,
  printWidth: 100,
  singleQuote: true,
  semi: false,
  overrides: [
    {
      files: "*.json",
      options: {
        printWidth: 200,
      },
    },
  ],
  arrowParens: "always",
}

2.3 在package.json中添加运行脚本

"format": "prettier --write --cache .",

三配置代码提交规范

一个好的仓库，代码提交规范不必可少
通常我们监听git hooks, 在pr-commit时候执行对应的规范，可以防止一些不友好的commit或者push

1. 配置husky

1.1 首先安装husky

pnpm i husky lint-staged -Dw

1.2 在package.json中配置脚本

script:{ 
  "prepare": "husky install"
}, 
"lint-staged": { 
  "*.{vue,js,ts,jsx,tsx,md,json}": [ 
    "pnpm run lint", "pnpm run format" 
    ] 
  }

1.3 上面完后，必须得初始化husky

npx husky install
npx husky add .husky/pre-commit "npx --no-install lint-staged"

2. 配置commitlint

2.1 安装commitlint依赖

pnpm i @commitlint/config-conventional @commitlint/cli  -Dw

2.2 创建.commitlintrc，并添加规范

touch .commitlintrc
cd .commitlintrc
#配置规则
{
  extends: ['@commitlint/config-conventional'],
};

2.3 运行husky, 创建执行钩子

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

至此，项目的规范就配置好了

项目初始化就到这里

下一章从零到一搭建一个Vue组件库，并发布至npm仓库

用pnpm搭建一个monorepo仓库

前言

一 项目初始化

二 配置代码校验和规范