组件库 组件工程化管理探索

组件库单组件版本控制

打包组件

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

module.exports = (env) => {
  const componentName = env.COMPONENT; // 获取组件名称

  return {
    mode: 'production',
    entry: `./components/${componentName}/index.js`,
    output: {
      path: path.resolve(__dirname, `dist/${componentName}`),
      filename: `${componentName}.js`,
      library: componentName,
      libraryTarget: 'umd',
      umdNamedDefine: true,
      globalObject: 'this'
    },
    resolve: {
      extensions: ['.js', '.vue']
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ],
    externals: {
      vue: {
        root: 'Vue',
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue'
      }
    }
  };
};

在用户项目中注册组件

import { createApp } from 'vue';
import App from './App.vue';
import { install as Button } from '@your-library/button';

const app = createApp(App);
app.use(Button); // 注册全局组件
app.mount('#app');

项目可以直接在模版中使用引入的打包后的组件原因

• 打包后的组件实际上已经是一个渲染函数了，然后进行了预先注册，当模版再次遇到打包后的组件时，因为已经有了 render 渲染函数，所以运行时会跳过打包编译过程

(function (global, factory) {
  if (typeof module === 'object' && typeof module.exports === 'object') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else {
    (global.VueComponent = factory());
  }
}(this, (function () {
  'use strict';

  var Button = {
    name: 'Button',
    render: function (h) {
      return h('button', [this.$slots.default()]);
    }
  };

  Button.install = function (app) {
    app.component(Button.name, Button);
  };

  return Button;

})));

每个组件独立的 package.json 文件的单组件包管理

/packages
  /button
    /src
      Button.vue
    package.json
    index.js
  /input
    /src
      Input.vue
    package.json
    index.js
  ...
package.json
lerna.json

使用 lerna 或 yarn workspaces 进行统一管理

• 根目录下有一个 package.json 文件，每个组件的依赖和脚本在根目录统一管理

添加组件文档、测试

通过 CI/CD 流水线自动化这个流程

国际化

• 各种 i18 方案

换肤

• 主题 css 变量
• 动态 link 样式表

组件库不同版本维护

• 使用 lerna 或 yarn workspaces 进行统一管理

打包不同 css 类型

{
 test: /\.css$/,
 use: ['style-loader', 'css-loader']
},
{
 test: /\.less$/,
 use: ['style-loader', 'css-loader', 'less-loader']
},
{
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'sass-loader']
},
{
 test: /\.unocss$/,
 use: ['style-loader', 'css-loader', 'postcss-loader', {
   loader: '@unocss/webpack',
   options: {}
 }]
}