组件库与团队项目规范化

组件库与团队项目设计规范

• 团队开发规范

eslint 代码质量检查,配合 prettier 代码风格格式化
commitlint commit规范
husky配合lint-staged 提交前对代码与commit进行检查

• 组件库设计

支持按需引入 对不能treeshaking的项目友好

eslint + prettier 处理代码质量与风格

eslint可以做了俩者,为什么要结合prettier,Prettier就是专门为了格式化代码而生的。对于代码中的一些问题，ESlint可能无法正确格式化，这个时候，Prettier就可以很好的完成格式化的任务。

npm init -y && npm i eslint eslint-config-prettier eslint-plugin-prettier prettier -D

eslint-config-prettier: 关闭可能与 prettier 冲突的规则 eslint-plugin-prettier: eslint --fix 按照 prettier 规则进行格式化 eslint配置初始化

npx eslint --init

eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "prettier"], // eslint-config-prettier 处理冲突
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
		plugins: ['prettier'], // eslint-plugin-prettier prettier规则格式化
    rules: {
			'prettier/prettier': 'error'
		}
}

通过.prettierrc.json配置格式化规则

{
  "semi": true, 分号
  "singleQuote": false, 单引号
}

package.json中增加scripts "lint": "eslint src --ext .js --fix"

新建src文件夹,新建index.js文件 index.js

let x = '111'
console.log(x)

执行npm run lint看效果 eslint + prettier 到此配置完成，解决了团队中代码风格和质量问题

husky + lint-staged

husky git提交前做一些处理 lint-staged 对暂存区文件做处理

npm i husky lint-staged -D && npm set-script prepare "husky install" && npm run prepare

增加git钩子 pre-commit 提交前执行 npx lint-staged --allow-empty

npx husky add .husky/pre-commit "npx lint-staged --allow-empty"

配置lint-staged,package.json中增加

"lint-staged": {
	"*.{js,ts,jsx,tsx,vue}": ["npm run lint", "git add"]
}

commitizen

npm install @commitlint/config-conventional @commitlint/cli -D

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

配置commitlint commitlint.config.js

const types = ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'release', 'chore', 'revert'];

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-empty': [2, 'never'],
    'type-enum': [2, 'always', types],
    'scope-case': [0, 'always'],
    'subject-empty': [2, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [2, 'always', 88],
  },
};

git-cz

npm install -g commitizen && npm i cz-customizable -D

将cz-customizable添加以下配置到 package.json 中

"config": {
	"commitizen": {
		"path": "node_modules/cz-customizable"
	}
}

然后在.cz-config.js中配置自定义的commit信息 (要和commitlint规格匹配 否则会因为提交的commit格式不符合而提交失败)

'use strict'
module.exports = {
    types: [
        { value: '✨ 特性', name: '✨ 特性:    一个新的特性' },
        { value: '🐛 修复', name: '🐛 修复:    修复一个Bug' },
        { value: '📝 文档', name: '📝 文档:    变更的只有文档' },
        { value: '💄 格式', name: '💄 格式:    空格, 分号等格式修复' },
        { value: '♻️ 重构', name: '♻️ 重构:    代码重构，注意和特性、修复区分开' },
        { value: '🌀 样式', name: '🌀 样式:    样式的调整' },
        { value: '⚡️ 性能', name: '⚡️ 性能:    提升性能' },
        { value: '✅ 测试', name: '✅ 测试:    添加一个测试' },
        { value: '🔧 工具', name: '🔧 工具:    开发工具变动(构建、脚手架工具等)' },
        { value: '⏪ 回滚', name: '⏪ 回滚:    代码回退' },
        { value: '⬆️ 升级', name: '⬆️ 升级:    依赖升级' },
        { value: '⬇️ 降级', name: '⬇️ 降级:    依赖降级' }
    ],
    scopes: [{ name: 'component' },{name: 'global'}],
    messages: {
        type: '选择一种你的提交类型:',
        scope: '作用范围:',
        subject: '描述:\n',
        body: false,
        footer: '关联关闭的issue，例如：#31, #34(可选):\n',
        confirmCommit: '确定提交说明?'
        // breaking: '非兼容性说明 (可选):\n',
        // customScope: 'Denote the SCOPE of this change:',
    },
    allowCustomScopes: true,
    allowBreakingChanges: ['特性', '修复'],
    subjectLimit: 100,
    skipQuestions: ['body', 'footer']
}

按需引入

有了tree-shaking为什么还需要按需引入，tree-shaking是有一定限制的,具体看文档描述。

webpack体验tree-shaking 仓库地址

组件库如何实现tree-shaing以及全部引入 webpack 中配置多入口以及出口路径 和 index,一般会有cli工具去做,也可以自己写