Vue UI库之初始构建项目结构

前言

之前梳理了Vue以及Element框架的基本项目结构，就是为了之后构建个人的Vue UI（PC端）库做准备，即vui库的构建主要是学习参考vue和element（也会参考其他框架和库）。本篇文章主要是初始化构建项目结构以及规范化提交信息的配置。

该类文章是一系列的，旨在打造个人UI库，会对每一个关键点做详细的梳理和分析，目标是通过实践加深对相关知识点的学习。主要涉及到知识点如下：

• 持续构建Travis CI相关知识
• Makefile相关知识
• Webpack构建等相关知识
• Git规范化提交信息相关
• gh-pages相关
• Eslint相关
• Git相关配置
• PostCss相关
• Yarn相关
• Babel相关
• Vue组件构建
• NPM包发布等相关知识

本篇文章实际上就是两点：

• 构建基本骨架，之后会有改动
• 提交信息的规范化

构建基本骨架

|-- vui
|-- .babelrc // babel配置文件
|-- .eslintignore // eslint校验忽略文件
|-- .eslintrc // eslint配置文件
|-- .gitignore // git忽略追踪管理的文件
|-- .travis.yml // 持续集成配置文件
|-- LICENSE // 开源协议
|-- Makefile // 自动化编译配置文件
|-- README.md // 项目说明文件
|-- package.json
|-- .postcssrc.js // postcss配置文件
|-- yarn.lock // yarn配置文件
|-- build // webpack编译配置文件目录
|-- packages // 组件源码目录
|-- src // 项目使用到的公共指令、工具集等源码存放目录
|-- static // 静态文件

|-- config // 相关配置

上面是初步构建的项目目录结构，在之后的构建过程中会有改动，但是大体如上。
构建上面的目录结构的步骤如下：

• vui项目本身依托vue，所以使用Vue脚手架来创建基本骨架，即vue init webpack vui
• vui项目本身使用yarn来管理依赖，所以在执行完vue init命令之后，使用yarn init来执行yarn的初始化

规范提交信息配置

通过Vue框架源码知道Vue规范了commit信息的规范，vui项目中也采用此措施，规范化提及信息。
规范提交信息，需要依赖5个依赖包，包名如下：

• commitizen
• conventional-changelog
• cz-conventional-changelog
• lint-staged
• yorkie

对于上面的5个依赖包，在梳理Vue框架时有提及到，这里就再次明确下：

• commitizen：撰写合格Commit Message的工具，提供git cz命令
• conventional-changelog：生成Change Log的工具包
• cz-conventional-changelog：angular提交规范的适配器
• lint-staged：文件过滤工具
• yorkie：用于Git Hooks，可以阻止不符合要求的commit

基于上面的依赖包构建提交信息规范的工作流，配置在package.json中，具体配置如下：

"scripts": {
	"commit": "git-cz"
},
"gitHooks": {
	"pre-commit": "lint-staged",
  "commit-msg": "node build/verify-commit-msg.js"
},
"lint-staged": {
	"*.js": [
  	"eslint --fix",
    "git add"
  ],
  "*.vue": [
    "eslint --fix",
    "git add"
  ]
},
"config": {
	"commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
   }
}

上面是在package.json中配置的，用于规范化提交信息。主要有两种提交形式：

• git commit -m “chore(vui): initial”
  
• npm run commit
  
  上面是两种提交形式，常用的还是第一种了。

这里需要注意的是verify-commit-msg.js文件了，该文件用于校验提交信息的合法性，主要参考vue，具体逻辑如下：

// 终端颜色文本
const chalk = require('chalk');
const msgPath = process.env.GIT_PARAMS;
const fs = require('fs');
// 获取提交的信息
const msg = fs.readFileSync(msgPath, 'utf-8').trim();
const commitRegex = /^(feat|fix|docs|refactor|perf|test|ci|chore|build|revert|comment)(\(.+\))?:.{1,50}/;

if (!commitRegex.test(msg)) {
  console.log();
 	// 相关错误提示
  console.error(
    `${chalk.bgRed.white(' ERROR ')} ${chalk.red(`invalid commit message format.`)}\n\n` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
    `    ${chalk.green(`feat(vui): add option`)}\n` +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
  );
  process.exit(1);
}

结语

作为vui库计划的第一篇文章，就构建了基本的框架结构(可运行)，目前这个结构不是最终的结构，之后还会有变动。

vui库计划的目标就是一步一步完成个人UI库的构建以及发布等流程，借此过程来学习并实践自动化构建相关的知识，所以我会尽可能对每一个重要的改动点对应一个commit。

实际上当创建库时，个人感觉最好的入口还是package.json，从package.json文件中你基本上可以得到整个项目的大概脉络。

vui库的目标是还是学习+实践，为了加深对webpack的学习，下一步对vui的处理就是：

• 基于通过vue-cli构建的webpack相关的配置文件，进行详细的分析
• 在此基础上参考Vue和Element对webpack的配置文件进行修改