公司vue组件库开发心得

前言

Evell组件库地址

公司移动端产品主要以微应用的形式发布,所以微应用总数是很大的,而且开发频率也相当高(技术栈为vue)。这就导致一个问题,在高的产品开发频率下,必然会导致许多无用功现象的发生,列如最常见的loading、message组件每次都要重新在新的项目里面复制粘贴,偶尔文件地址放错了还会导致不必要的bug处理时间。在接手一个微应用的开发后,实在看不下去这样低效率的开发模式,决定解决的这种“野路子”。

开发过程

由于没有过多的业余时间,所以公共组件的开发都是以项目入手,例如此次开发的项目中有这么些可以提取的组件,会先在项目里完成对组件的实现,后续再引入到组件库的脚手架中去(后期会在example基础上进行开发😅)。

重点

整个组件库开发最大的障碍还是在组件库脚手架的搭建上,通过借鉴github上各种组件库的开发方案,也算是解决了这一难题,成功搭建出能够用于生产环境、基于npm包系统的vue组件库。整个组件库还处于初中期阶段,后续还有许多配置以及组件需要完善,不过对于想开发一套自己的组件库的同学是个福音,现在的架子不是很复杂,对于刚接触这套方案的同学来说学习起来不会那么头疼。

核心配置文件:

// webpack.components.conf.js
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')

const webpackConfig = merge(baseWebpackConfig, {
  entry: {
    'loading': path.resolve(__dirname, '../src/components/loading/index.js'),
    'message': path.resolve(__dirname, '../src/components/message/index.js'),
    'loadMore': path.resolve(__dirname, '../src/components/loadMore/index.js')
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: '[name]/index.js',
    library: 'evell',
    libraryTarget: 'umd',
  }
})

module.exports = webpackConfig
// webpack.prod.conf.js
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')

const webpackConfig = merge(baseWebpackConfig, {
  entry: {
    main: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: 'evell.js',
    library: 'evell',
    libraryTarget: 'umd',
    // umdNamedDefine: true
  }
})

module.exports = webpackConfig

具体的脚手架请参见Evell组件库地址

寄语

望大家都能从繁琐的重复性劳动中脱离出来,成为有一个会“偷懒”的前端开发者😝

View on GitHub