组件库构建过程
白日强 2019-06-27
最近在项目内部创建了一个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的libraryTarget: 'window'模式，就能达到我们的要求。
再配合ExtractTextPlugin，即可获取所有的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这个插件来使用，代码会更加简洁舒适。
那么根据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模块化原理-commonjs、webpack模块化原理-ES module、webpack模块化原理-Code Splitting），而通常作为按需加载来说，用户会有自己的webpack，那么组件库需要做的就是把vue文件编译成js，仅此而已（甚至vue文件也是可以的，但是考虑到更通用的场景，js还是更合适）。
所以，这里可以使用vue官方提供的vue-template-compiler，他的工作是把vue模板编译成独立的vue对象。这里我会使用同事开发的vue-sfc-compiler来做编译，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。
