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

文章目录

组件库单组件版本控制
- 打包组件
- 在用户项目中注册组件
- - 项目可以直接在模版中使用引入的打包后的组件原因
- 每个组件独立的 package.json 文件的单组件包管理
- 使用 lerna 或 yarn workspaces 进行统一管理
- 添加组件文档、测试
- 通过 CI/CD 流水线自动化这个流程
国际化
换肤
组件库不同版本维护
打包不同 css 类型

组件库单组件版本控制

打包组件

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/srcButton.vuepackage.jsonindex.js/input/srcInput.vuepackage.jsonindex.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: {}}]
}