从零搭建一个组件库 -- 项目搭建

项目搭建

• 1、新建一个文件夹 使用【 md 文件名 或 mkdir 文件名 】来创建。
  
• 2、cd 文件名 进入文件目录
  
• 3、 在当前目录下创建一个新的 package.json 文件

pnpm init

• 4、mkdir packages 创建一个名为 packages 的目录，里面可以存放你要开发的项目，比如 components 和 cli。这样的组织结构可以让你更好地管理和组织项目代码。

• 5、创建一个名为 pnpm-workspace.yaml 的文件，并在其中指定你的 packages。

  这将告诉 PNPM 工作区，你的项目使用了工作区特性，并且指定了包含在工作区中的包的位置。在这个示例中，packages/* 表示 packages 目录下的所有包都被包含在工作区中。

  # pnpm-workspace.yaml
  packages:
    - 'packages/*'
  

• 6、安装 TypeScript 并初始化 tsconfig.json 文件，你可以按照以下步骤进行：

  安装 TypeScript：在项目根目录下执行以下命令安装 TypeScript（如果还没有安装）

  # -w 表示在要把包下载到根目录
  pnpm add typescript -D -w
  

  初始化 tsconfig.json 文件：在项目根目录下执行以下命令初始化 tsconfig.json 文件

  npx tsc --init
  

  这将在项目根目录下生成一个默认的 tsconfig.json 文件，你可以根据需要对其进行调整。
  

添加代码规范

prettier

• 安装依赖

pnpm add prettier -D -w

• 根目录创建 .prettierrc.js

module.exports = {
  semi: false,
  singleQuote: true,
  printWidth: 80,
  trailingComma: 'none',
  arrowParens: 'avoid'
}

eslint

• 安装依赖

pnpm add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D -w
pnpm add eslint-config-prettier eslint-plugin-prettier -D -w

• 根目录创建 .eslint.js

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'prettier/prettier': 'error',
    'no-extra-semi': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-extra-semi': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-interface': 'off'
  }
}

• package.json 中添加执行命令

"scripts": {
  "prettier": "prettier --write .",
  "lint": "eslint --ext .ts packages/*/**.ts",
  "lint:fix": "eslint --ext .ts packages/*/**.ts --fix"
},

husky + lint-staged

husky 和 lint-staged 是两个常用的工具，用于在代码提交前进行代码规范检查和格式化。
husky 哈士奇，代码提交前可以执行自定义 git hooks
在代码提交之前，进行代码规则检查能够确保进入 git 库的代码都是符合代码规则的。但是整个项目上运行 lint 速度会很慢，lint-staged 能够让 lint 只检测暂存区的文件，所以速度很快。

pnpm add husky lint-staged -D -w
npx lint-staged

配置 husky 和 lint-staged：在 package.json 文件中添加以下配置：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,ts,jsx,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

现在我们可以试着提交一下代码，如果不符合 eslint 校验规则的会自动修复，修复完成后需要再次提交

commitlint

commitlint 统一提交时的 message； 官方文档

• 安装依赖

pnpm add @commitlint/config-conventional @commitlint/cli -D -w

• 根目录新建 commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

• 添加钩子 .husky/commit-msg

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1

|-- Wannaer
    |-- .eslintrc.js
    |-- .prettierrc.js
    |-- commitlint.config.js
    |-- package.json
    |-- pnpm-lock.yaml
    |-- pnpm-workspace.yaml
    |-- README.md
    |-- tsconfig.json
    |-- packages
        |-- components
            |-- index.ts