最近在项目内部创建了一个vue组件库，希望通过组件库的形式，统一项目中组件的逻辑和样式，让代码的复用性更强。
这篇文章主要是梳理组件库的整个结构和构建过程。
结构
首先在这里介绍一下组件库的代码结构，上面是整体代码目录结构，每个目录的作用如下：
- packages：组件源码位置，每个组件作为一个子目录；同时提供packages/index.js作为全局组件的入口（具体内容后面会介绍）
- lib：存放编译后的代码
- build：构建工具相关（后面构建过程中会重点介绍）
- config：环境配置相关
- examples：doc文档相关
- test：单元测试代码
- 其他：eslint、babel、git相关的配置文件
这里再详细说一下packages，先看一下packges的目录结构：
packages中子目录的名字就是组件的名称，每个组件会有index.vue和index.sass作为组件入口和样式入口。
同时，在packages根目录，index.js作为全局注册组件入口，会引入所有组件，然后调用Vue.component注册为全局组件。 ok，目录结构梳理清楚，但这也只是开发过程的一部分，至于最终的输出内容，还需要基于具体使用场景来编译，下面是目前组件库支持的使用方式和具体的编译方法。
浏览器引入
浏览器引入必然包括script和link，所以对应的，我们需要打包出包含所有组件需要的js和css文件。
对于script这种使用场景，需要把所有代码都打包到一个文件中，那么通过webpack的模式，就能达到我们的要求。再配合，即可获取所有的css内容。webpack入口文件就是packages/index.js，最终编译的文件，就是整个文件pirate.js和样式文件pirate.css。 webpack配置如下：
"use strict";const path = require("path");const webpack = require("webpack");const ExtractTextPlugin = require("extract-text-webpack-plugin");function resolve(dir) { return path.join(__dirname, "..", dir);}module.exports = { entry: resolve("packages/index.js"), externals: { vue: { root: "Vue", commonjs: "vue", commonjs2: "vue", amd: "vue" } }, output: { path: resolve("lib"), filename: "pirate.js", library: "pirate", libraryTarget: "window", }, resolve: { extensions: [".js", ".vue"] }, module: { rules: [{ test: /\.vue$/, loader: "vue-loader", options: { js: { loader: "babel-loader", options: {} }, scss: { loader: ["css-loader", "scss-loader"] }, extractCSS: true } }, { test: /\.js$/, loader: "babel-loader", include: [resolve("package")] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader", options: { limit: 10000 } } ] }, plugins: [ new ExtractTextPlugin("pirate.css"), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ]}; 按需加载
至于按需加载，默认的方式，当然可以直接通过import Xxx from "pirate/lib/xxx/index.js"的方式去加载js，同时还需要通过@import ~pirate/lib/index.css手动加载样式。
但是这里建议配合这个插件来使用，代码会更加简洁舒适。
那么根据babel-plugin-import的要求，index.css会生成在lib/xxx/style目录下，这样的话，按需加载就需要一行代码：import { Xxx } from 'pirate'。 回到编译阶段，自然的会想到用webpack来编译，每个组件就是一个入口，然后使用webpack多入口的模式来编译。
首先，前置一个自动化收集组件目录的工作，生成components.json用来作为webpack入口，实现的build/component.js代码如下：
const fs = require('fs-extra');const path = require('path');function isDir(dir) { return fs.lstatSync(dir).isDirectory();}const json = {};const dir = path.join(__dirname, '../packages');const files = fs.readdirSync(dir);files.forEach(file => { const absolutePath = path.join(dir, file); if (isDir(absolutePath)) { json[file] = `./packages/${file}`; }});console.log(JSON.stringify(json)); 然后通过node build/components.js > components.json生成components.json，通过webpack编译即可，webpack代码如下：
'use strict'const path = require('path');const ExtractTextPlugin = require('extract-text-webpack-plugin');const components = require('../components.json');function resolve(dir) { return path.join(__dirname, '..', dir)}module.exports = { entry: components, externals: { vue: { root: 'Vue', commonjs: 'vue', commonjs2: 'vue', amd: 'vue' }, }, output: { path: resolve('lib'), filename: '[name]/index.js', library: 'pirate', libraryTarget: 'umd', umdNamedDefine: true, }, resolve: { extensions: ['.js', '.vue'], }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', options: { js: { loader: 'babel-loader', options: {}, }, scss: { loader: ['css-loader', 'scss-loader'], }, extractCSS: true, } }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('package')], }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, } }, ] }, plugins: [ new ExtractTextPlugin('[name]/style/index.css'), ],} 但是这里有一个问题，或者说是一个优化点，就是通过webpack生成的入口代码，都会包了一层webpack的启动器（想了解可以看我之前的文章、、），而通常作为按需加载来说，用户会有自己的webpack，那么组件库需要做的就是把vue文件编译成js，仅此而已（甚至vue文件也是可以的，但是考虑到更通用的场景，js还是更合适）。
所以，这里可以使用vue官方提供的，他的工作是把vue模板编译成独立的vue对象。这里我会使用同事开发的来做编译，vue-sfc-compiler底层封装了vue-template-compiler，上层提供了babel的支持，使用起来会更加方便，不过目的是一样的。
那么，基于上面webpack编译的文件，我会用vue-sfc-compiler编译出的更小的文件做覆盖，具体代码如下：
const fs = require('fs-extra');const compiler = require('vue-sfc-compiler');const path = require('path');function isDir(dir) { return fs.lstatSync(dir).isDirectory();}function compile(dir) { const files = fs.readdirSync(dir); files.forEach(file => { const absolutePath = path.join(dir, file); if (isDir(absolutePath)) { return compile(absolutePath); } if (/\.vue|.js$/.test(file)) { const source = fs.readFileSync(absolutePath, 'utf-8'); const content = compiler(source).js; const outputPath = absolutePath.replace('packages', 'lib').replace('.vue', '.js'); fs.outputFileSync(outputPath, content); } });}const dir = path.join(__dirname, '../packages');compile(dir); 全局组件注册
对于全局组件注册的方式，我会把这个入口作为整个module的入口，也就是默认的使用方式。
在上一步，按需加载阶段，其实已经把每个组件编译好了，那么入口文件，其实只要用babel做个转换就可以了，这里用到gulp来操作，代码如下：
const gulp = require('gulp');const babel = require('gulp-babel');const path = require('path');gulp.task('default', () => gulp.src(path.join(__dirname, '../packages/index.js')) .pipe(babel({ presets: ['env'] })) .pipe(gulp.dest(path.join(__dirname, '../lib')))); 总结
最后还有一个遗憾，目前文档化还没完成，那么这里先描述一下目前的设想，等实现后再写一篇分享。
现在计划是每个组件目录增加一个demo.vue和doc.md，demo.vue用来演示当前组件功能，doc.md作为文档内容。
然后通过一个自动化工具，把所有组件demo和doc合并到一起，生成一个html。