包管理工具

本项目使用pnpm作为包管理工具,用pnpm workspace来实现monorepo。

为什么选用monorepo

monorepo为一个仓库管理多个模块和包，当他们需要什么依赖呢直接到相应的包中进行下载就可以了，当然如果他们需要同一份依赖的话，可以把它抽离出来，让他们共同安装。

组件库为了让用户使用方便，可以把每一个组件作为一个单独的包发布到 NPM 上，用户在使用的时候，可以只下载它需要的组件。

当然也可以把所有的组件打包到一起发布。

开始

创建vue项目和搭建monorepo

首先确定你的电脑安装了pnpm,没有请安装

npm i pnpm -g

然后建立文件夹，初始化项目

pnpm init

安装vue3 + typescript

pnpm install vue@next typescript -D

创建.npmrc(这个文件是:npm 的配置文件，用于在全局或特定用户的npm 环境中存储不同的配置选项)，下面代码复制

shamefully-hoist=true
// 作用依赖包都扁平化的安装在node_modules下面
复制代码
strict-peer-dependencies=false
shell-emulator=true

配置ts

使用tsc --init创建tsconfig.json

配置工作区

在根目录下创建pnpm-workspace.yaml 文件,添加下面的配置

packages: 
    - play # 存放组件测试的代码 
    - docs # 存放组件文档 
    - packages/* # packages 目录下都是组件包

其中packages里面可以放很多东西，你写的组件:components,主题包，工具包等等，当你创建了这些包的时候要在里面进行初始化,pnpm init得到package.json文件，可以在里面更改包的名称

首先在packages下面创建文件夹，目录如下图

接着给每个包进行初始化，修改将来发布包的名称

例如components

{
  "name": "@merikle-ui/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

其余的包和这个类似

接着可以将这些包下载到根目录下 pnpm install @merikle-ui/components @merikle-ui/theme-chalk @merikle-ui/utils -w -w是允许下载到根目录下

下载的

规范代码的工具(eslint + perttier)

.eslintrc.js/.eslintrc.json+.eslintignore

1.pnpm install --save-dev eslint eslint-plugin-vue 2. 按照eslint.vuejs.org/user-guide/…配即可 3. 在package.json中配置脚本

“eslint”: “eslint . –ext .vue,.js,.jsx,.cjs,.mjs –fix –ignore-path .gitignore”,

因为eslint使用的是espree语法解析，所以要安装

pnpm i @typescript-eslint/parser -D

一些ts额外的eslint的语法规则

pnpm i @typescropt-eslint/eslint-plugin --save-dev

在.eslintrc.js/.eslintrc.json中配置

自行配置

module.exports = {
    root: true,
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        'prettier',
        'plugin:prettier/recommended',
        'plugin:@/typescript-eslint/recommended',
    ],
    parserOptions: {
        ecmaVersion: 'latest',
    },
}

eslintignore

# (不需要检查的)
node_modules/
docs/

prettier

可以自行配置

下载

pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D

配置文件 prettier.config.js或.prettierrc.js可以定义规则

{
   "printWidth": 80,
   "tabWidth":4,
   "semi": false,
   "singleQuote": true,
   "endOfLine": "auto",
   "trailingComma": "all"
}

3.为了防止eslint和prettier冲突

pnpm install eslint-config-prettier –save-dev

在eslint中配置

解决与prettier的冲突
module.exports = {
    root: true,
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        'prettier',//这一行
        'plugin:prettier/recommended',//这一行
        'plugin:@/typescript-eslint/recommended',//这一行
    ],
    parserOptions: {
        ecmaVersion: 'latest',
    },
}

最后使用webstorm中的自动配置prettier来规范代码，就可以不用在package.json里面写了,在package.json填写：

”format”: “prettier –write "./**/*.{html,vue,ts,js,json,md}"“,

配置git规范

husky + commitzine + commitline

// commitlint
// 项目目录下安装
pnpm i commitlint --save-dev
pnpm i @commitlint/config-conventional --save-dev
// 在项目目录下，新建配置文件 commitlint.config.ts， 内容如下
import type {UserConfig} from '@commitlint/types';
const Configuration:UserConfig = {
    extends: ['@commitlint/config-conventional'],
    rules:{
        'type-enum': [2, 'always', [
            "feat", // 新功能 feature
            "fix", // 修复 bug
            "docs", // 文档注释
            "style", // 代码格式(不影响代码运行的变动)
            "refactor", // 重构(既不增加新功能，也不是修复bug)
            "perf", // 性能优化
            "test", // 增加测试
            "chore", // 构建过程或辅助工具的变动
            "revert", // 回退
            "build" // 打包
        ]],

    },
    // subject 大小写不做校验
    // 自动部署的BUILD ROBOT的commit信息大写，以作区别
    'subject-case': [0]
}

module.exports = Configuration


// husky
// 项目目录下安装
pnpm i husky --save-dev
//在.husky文件夹下面新增commit-msg添加下面内容（git提交对提交的内容进行检验(commitlint)）
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm exec commitlint --config commitlint.config.ts --edit "${1}"


// commitizen
// 全局安装
pnpm install commitizen -g
// 项目目录下安装
pnpm install commitizen --save-dev
commitizen init cz-customizable --save --save-exact

// 在package.json文件中增加相关配置
// 注意这里的path可能要根据实际情况进行修改，如nAdmin项目
"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"
  }
}

// 在项目目录下，新建配置文件 .cz-config.js
'use strict';

module.exports = {
  types: [
    {value: 'feat',     name: 'feat:     新功能'},
    {value: 'fix',      name: 'fix:      修复'},
    {value: 'docs',     name: 'docs:     文档变更'},
    {value: 'style',    name: 'style:    代码格式(不影响代码运行的变动)'},
    {value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},
    {value: 'perf',     name: 'perf:     性能优化'},
    {value: 'test',     name: 'test:     增加测试'},
    {value: 'chore',    name: 'chore:    构建过程或辅助工具的变动'},
    {value: 'revert',   name: 'revert:   回退'},
    {value: 'build',    name: 'build:    打包'}
  ],
  // override the messages, defaults are as follows
  messages: {
    type: '请选择提交类型:',
    // scope: '请输入文件修改范围(可选):',
    // used if allowCustomScopes is true
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选，待优化去除，跳过即可):',
    // breaking: 'List any BREAKING CHANGES (optional):\n',
    footer: '请输入要关闭的issue(待优化去除，跳过即可):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  allowCustomScopes: true,
  // allowBreakingChanges: ['feat', 'fix'],
  skipQuestions: ['body', 'footer'],
  // limit subject length, commitlint默认是72
  subjectLimit: 72
};

组件库开发第一天搭建环境