牵头公司 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 组件库地址

寄语

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

zhwithsweet

2018-03-01 11:00:16 +08:00

巧了，我做的就把常用组件剥离 vue，做成原生的。献丑下代码，及其简单（两位大神勿喷啊
```
import { getUUID } from '../util'
/**
* [全局 alert 组件]
* @type {[type]}
*/
export default class Alert {
constructor({ message = '这是一条警告信息' }) {
this.message = message
}
createTmpl() {
return `
<div class="df-alert">
<div class="df-alert__header">
<h2 class="df-alert__title">警告</h2>
<i class="df-alert__icon icon-times df-alert__close"></i>
</div>
<p class="df-alert__text">${this.message}</p>
<div class="df-alert__footer">
</div>
</div>
`
}
// mounted
mount() {
let html = this.createTmpl()
let wrapper = document.createElement('div')
wrapper.classList.add('df-alert__wrapper', 'df-alert__wrapperBg')
wrapper.style['z-index'] = 200
wrapper.id = `alert${getUUID()}`
wrapper.innerHTML = html
document.body.appendChild(wrapper)
// 绑定 close 事件
let btn = document.querySelector('.df-alert__close')
btn.addEventListener('click', this.close, false)
}
open(msg) {
if (msg) this.message = msg
this.mount()
}
// destory
close() {
if (!document.querySelector(`.df-alert__wrapper`)) return
let nodes = document.querySelectorAll(`.df-alert__wrapper`);
let inner = document.querySelector(`.df-alert`);
inner.style.transition = `all .2s`
inner.style.opacity = 0
inner.style.transform = `translate(-50%, -60%)`
inner.addEventListener('transitionend', function(e) {
if (e.propertyName === 'transform') {
nodes.forEach(n => {
document.body.removeChild(n)
})
}
}, false)
}
}

```