前言
Evell 组件库地址
公司移动端产品主要以微应用的形式发布, 所以微应用总数是很大的, 而且开发频率也相当高 (技术栈为 vue) 这就导致一个问题, 在高的产品开发频率下, 必然会导致许多无用功现象的发生, 列如最常见的 loadingmessage 组件每次都要重新再新的项目里面复制粘贴, 偶尔文件地址放错了还会导致不必要的 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 组件库地址
寄语
望大家都能从繁琐的重复性劳动中脱离出来, 成为有一个会偷懒的前端开发者
来源: https://juejin.im/entry/5a978c49f265da4e8b30156f