组件库构建过程

Keller

发布于 2021-12-14 09:30:30

5210

发布于 2021-12-14 09:30:30

文章被收录于专栏：Keller

最近在项目内部创建了一个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')))
);