V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Johnsen
V2EX  ›  程序员

牵头公司 vue 组件库开发心得

  •  1
     
  •   Johnsen · 2018-03-01 09:44:20 +08:00 · 3682 次点击
    这是一个创建于 2220 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    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 组件库地址

    寄语

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

    5 条回复    2018-03-01 11:01:40 +08:00
    Aresn
        1
    Aresn  
       2018-03-01 10:03:48 +08:00   ❤️ 1
    Johnsen
        2
    Johnsen  
    OP
       2018-03-01 10:13:59 +08:00
    @Aresn 谢谢提醒,借鉴 iView 文档书写的时候复制过来忘记改了😂
    Aresn
        3
    Aresn  
       2018-03-01 10:23:48 +08:00
    zhwithsweet
        4
    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)
    }
    }

    ```
    zhwithsweet
        5
    zhwithsweet  
       2018-03-01 11:01:40 +08:00
    咋不支持 md 语法呢?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2745 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 12:24 · PVG 20:24 · LAX 05:24 · JFK 08:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.