公司vue组件库开发心得

前言

Evell组件库地址

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

开发过程

由于没有过多的业余时间，所以公共组价的开发都是以项目入手，例如此次开发的项目中有这么些可以提取的组件，会先在项目里完成对组件的实现，后续再引入到组件库的脚手架中去

重点

整个组件库的开发最大的障碍还是在组件库脚手架的搭建上，通过借鉴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组件库地址

寄语

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