Vue UI库之基本构建配置说明

前言

目前正在着手构建的Vue UI库vui目前已完成主要的webpack构建过程，故以此文章说明构建过程中关键点。

具体说明

还是依据package.json的配置来逐一说明，package.json的主要配置如下：

{
  "files": [
    "dist",
    "src",
    "packages"
  ],
  "srcipts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "deploy:build": "rimraf examples/homepage && node build/deploy-build.js && gh-pages -d examples/homepage",
    "lint": "eslint --ext .js,.vue src",
    "clean": "rimraf dist",
    "changelog": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s",
    "build:entry": "node build/build-entry.js",
    "build:style": "gulp build --gulpfile build/build-style.js",
    "build": "npm run clean && npm run build:entry && npm run lint && npm run build:style && node build/build.js",
    "pub": "sh build/release.sh",
    "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主要的配置分别是files、scripts、提交规范，实际上核心是scripts的配置。

files

定义npm包发布后的包含的文件和目录，VUI项目之前测试npm发布脚本，发布过一个demo版本vui-lib v0.1.3。

通过package.json中的配置，发现除了包含dist、src、packages还包含其他必要的文件，具体如下：

提交规范

实际上这里在Vue UI库之初始构建项目结构文章中就提交了这边定义的git提交规范，而且这里在scripts也会有专门的命令来生成相关的CHANGELOG.md文件。

scripts命令详解

scripts定义的命令有10条，具体如下：

{
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "deploy:build": "rimraf examples/homepage && node build/deploy-build.js && gh-pages -d examples/homepage",
  "lint": "eslint --ext .js,.vue src",
  "clean": "rimraf dist",
  "changelog": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s",
  "build:entry": "node build/build-entry.js",
  "build:style": "gulp build --gulpfile build/build-style.js",
  "build": "npm run clean && npm run build:entry && npm run lint && npm run build:style && node build/build.js",
  "pub": "sh build/release.sh",
  "commit": "git-cz"
}

• dev命令

  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  

  dev命令实际上是本地启动UI库官网项目的，与平时开发业务项目一样，对应的是webpack配置文件是webpack.dev.conf.js。

  实际上这部分参考element UI库项目的做法，整体项目实际上是由两部分组成：UI库部分 + UI库官网文档部分，像Vue框架项目就不一样，vue库项目 和 Vue官网项目是独立分开，vui库项目也是前者这种方式。dev命令就是启动UI库官网文档项目， 即具体对应example目录下代码。

  具体的配置可以查看build/webpack.dev.config.js文件，有详细的注释。

• deploy:build命令

  "deploy:build": "rimraf examples/homepage && node build/deploy-build.js && gh-pages -d examples/homepage"
  

  这是条复合命令，由3个子命令组成：

  • rimraf examples/homepage：删除example目录下的homepage目录，homepage就是UI官网文档项目的输出目录
  • node build/deploy-build.js：执行deploy-build.js文件，对官网项目打包编译
  • gh-pages -d examples/homepage：推送gh-pages分支

  从上面3个子命令的处理，可以看出deploy-build命令实际上就是对example目录下官网项目进行打包编译并推送到远程gh-pages分支。

• lint命令

  "lint": "eslint --ext .js,.vue src"
  

  执行eslint命令，检查src下js文件和vue文件代码格式问题。

• clean命令

  "clean": "rimraf dist"
  

  删除UI库的输出目录，避免文件遗留情况。

• changelog命令

  "changelog": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s"
  

  该命令是依据git提交信息来生成CHANGELOG.md文件。

• build:entry命令

  "build:entry": "node build/build-entry.js"
  

  该命令是用于生成src/index.js，即入口文件，入口文件实际上是针对组件的批量注册功能。

• build:style命令

  "build:style": "gulp build --gulpfile build/build-style.js"
  

  该命令是用于打包编译所有的css文件并输出到指定目录。实际上是参考element ui的做法，将样式文件从组件中分离，以便提供自定义主题，使用gulp来实现相关处理。

• build命令

  "build": "npm run clean && npm run build:entry && npm run lint && npm run build:style && node build/build.js"
  

  由一系列子命令组成：

  • clean
  • build:entery
  • lint
  • build:style
  • node build/build.js

  该命令作用是打包编译UI库用于生产环境，从上面的一系列子命令中可知是执行build/build.js，该文件有详细的注释。

• pub命令

  "pub": "sh build/release.sh"
  

  该命令用于npm包的发布，该命令实际上是执行shell脚本来处理这个过程。

• commit命令

  "commit": "git-cz"
  

  该命令提供交互式git提交规范的确认，具体可看Vue UI库之初始构建项目结构这篇文章。

总结

vui库是个人的Vue UI库，除了最基本的组件外之后还会增加常见的业务组件，会持续构建该UI库，同时该UI库会有详细的注释，如果你想学习如何构建UI库，欢迎star和fork。