从零构建一个Vue UI组件库

前言

之所以写这一篇文章，是为了记录自己构建一个组件库的历程，同时也给那些自己想写组件库的同学一个教程。组件库也写了一段时间了，基本的架子也搭建得差不多了，但是回想自己搭建的过程还是不够完善，所以回来整理一遍自己的思路，让自己的技术有个输出。

先看下效果ninecat-ui.github.io

组件库源码ninecat-ui（如果觉得还不错，可以给个start哦）

下面是我在编写这个UI组件库的一些Todolsit，已经完成的功能已经打勾了，如果有兴趣的可以和我一起完成没有完成的功能。

• 自定义文档目录结构
• 通过MD来展示组件demo
• 集成Travis CI
• 集成单元测试
• 集成codecov
• 自动构建组件文档
• 根据tag自动发布npm
• 集成docsearch
• 集成codepen
• 颜色主题自定义
• 国际化多语言
• JavaScript和typescript混合开发

好，那我们就开始吧！

寻找合适的组件库原型

开始写组件库之前，你需要有一个好的原型图。国内比较流行的Element UI和Ant Design都有相应的元件库，如果想练手，完全可以直接那拿来用。

这里提供两个链接可去下载相应的UI组件库资源。

https://element.eleme.cn/2.0/#/zh-CN/resource

https://ant.design/docs/spec/download-cn

我用的是Rsuite的UI组件库，感觉还不错良心团队。

有了原型就可以开始干活了！

初始化项目

既然是从零开始搭建一个组件库，那肯定不能用脚手架来搭建了，那就不叫从零开始了，所有我们直接npm init开始项目。

mkdir ninecat-ui
cd ninecat-ui
npm init

到这里项目初始化算成功了，下面来装一下必要的依赖。

安装依赖

依据我安装依赖的经验，把依赖分为这几种：核心依赖、构建依赖、工具依赖。当然这是我按照功能性去区分的，更专业的分类请看 https://zhuanlan.zhihu.com/p/29855253

这里我们用yarn来安装依赖。现在安装依赖先不区分哪种依赖类型，直接yarn add就行，等后面架子搭建好了再来区分属于那类依赖，然后重构一下package.json文件，关于package.json更加详细的文档可以参考 https://docs.npmjs.com/files/package.json

一个基本的VUE项目大概需要这些依赖：
vue、webpack、webpack-cli、webpack-dev-server、@babel/core、babel-loader、css-loader、html-webpack-plugin、vue-loader
、vue-template-compiler

编写最简单的代码

依赖装好了，我们来定义一下项目html模版，入口文件和VUE主页文件，根目录新建index.html,新建src目录，src下新建一个index.js和index.vue。

index.html

index.vue

index.js

import Vue from 'vue'
import App from './index.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

内容好了，现在需要简单的配置一下webpack让项目运行起来。

添加最简单的webpack配置

在跟目录下新建一个build目录，里面新增一个webpack配置文件webpack.config.base.js

'use strict'
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, '../src/index.js'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
    }),
    new VueLoaderPlugin(),
  ]
}

如果有同学还不懂这些基本的配置，应该去翻一下webpack的官方文档了哦，给出链接：https://www.webpackjs.com/

进行如上配置，一个基本的VUE项目就搭建差不多了，然后我们需要配置一下项目的启动脚本。在package.json里面scripts下进行如下配置：

"scripts": {
    "start": "webpack-dev-server --config build/webpack.config.base.js"
 },

最后来看一下我们的项目目录结构：

然后运行一下我们的项目：yarn start

OK，到这里基本的一个vue项目搭建好了，我们后面就可以开始构建组件了。

编写第一个组件

先在根目录下新建一个packages文件,然后在下面新建一个hello文件夹，开是编写组件。组件作用很简单，就是一个简单的打招呼的组件，传入名字即可，会在页面显示Hello，xxx。

下面看看我们的目录结构：

现在需要来写一下我们的Hello组件。

packages/hello/src/index.vue

packages/hello/index.js

import Hello from './src/index.vue'

// install 是默认的方法,供按需引入。
// 当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。

Hello.install = function(Vue){
  Vue.component(Hello.name, Hello)
}

export default Hello

组件文件夹之所以这么写是为了让组件有个统一的出口，每个组件文件夹下的src目录是可以扩展组件其他功能。

src/index.vue

OK，到这里我们算封装了一个最简单的Hello组件，但是现在我们还没有实现将组件打包后用npm安装这个组件库，然后引用里面的Hello组件,所以下面需要进行导出配置和打包配置。

配置导出和打包

组件编写好了需要统一导出，现在是一个组件，后面会有很多组件，所以我们需要统一导出组件了。

packages/index.js

import Hello from './hello'

const components = {
  Hello
}

const install = function (Vue) {
  Object.values(components).forEach(component => {
    Vue.component(component.name, component);
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  Hello
}

配置打包
build/webpack.config.build.js

'use strict'
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')


module.exports = {
  mode: 'production',
  entry: {
    'ninecatui': './packages/index.js' // 入口文件
  },
  output: {
    path: path.resolve(__dirname, '../package'), // 出口目录
    publicPath: '/package/',
    library: 'ninecatui', // 包名
    libraryTarget: 'umd',
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

到这里基本的打包就可以了，可以本地测试一下。

在package.json增加一个打包脚本,

"build": "webpack --config build/webpack.config.build.js"

我们来build一下项目：npm run build

会打出一个package文件夹，我们来引用一下这个组件库。

修改一下src/index.js

import Vue from 'vue'
import App from './index.vue'
import Ninecatui from '../package/ninecatui'

Vue.use(Ninecatui)

new Vue({
  render: h => h(App)
}).$mount('#app')

修改一下src/index.vue

一样可以访问。

下一步我们尝试将打包至npm，然后本地安装来引用这个组件库。

发布 NPM

本地打包测试

修改package.json文件的入口文件

"main": "package/ninecatui.js",

然后npm pack就可以打出一个ninecatui-1.0.0.tgz的文件。

这个文件是可以通过npm安装的，为了测试，我们可以直接在当前项目测试一下。

在用npm安装之前需要改一下package.json的name，不然会在安装的时候冲突，我们将

"name": "ninecatui"

改成

"name":"ninecatui-test"

直接yarn add ./ninecatui-1.0.0.tgz或者npm install ./ninecatui-1.0.0.tgz

之所以要加./是因为本地安装是以路径为参数。

如果出现如上效果，恭喜你本地安装成功了，下面我们来改一下引用，看看应用是否可以正常使用。

修改src/index.js

import Vue from 'vue'
import App from './index.vue'
// 修改引用
import Ninecatui from 'ninecatui'

Vue.use(Ninecatui)

new Vue({
  render: h => h(App)
}).$mount('#app')

真好，可以正常使用，说明本地打包是可以正常使用的。下面我们来将它发布到npm。

发布至npm

先在npm官网注册一个账号。

在项目根目录下，登录npm账号，输入用户名、密码、邮箱。

npm login

出现如上信息就说明你登录成功了。

然后执行npm publish即可

上图，ninecatui-test就是我们的包。

验证测试npm包

我们用vue-cli创建一个vue项目，然后通过npm来安装引入。

直接

vue create hello-world

然后

yarn add ninecatui-test

直接修改一下src/main.js和src/App.vue

src/main.js

import Vue from 'vue'
import App from './App.vue'
import Ninecatui from 'ninecatui-test'

Vue.use(Ninecatui)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

src/App.vue

恭喜你，第一个npm包发布成功。npm发布成功了至少踏出了一小步，后面还要不断优化，将项目工程化。