preface

Evell component library address

The company’s mobile terminal products are mainly released in the form of micro applications, so the total number of micro applications is large and the development frequency is quite high (vUE technology stack). This leads to a problem. At a high production development rate, a lot of idle work is bound to occur, such as the most common loading, message components have to be copied and pasted into new projects every time, and the occasional misplaced file address leads to unnecessary bug handling time. After I took over the development of a micro application, I really could not stand the low efficiency of the development mode, and decided to solve the way of SB.

The development process

Because there is not too much spare time, so the development of common group price is to start with the project, for example, the development of the project there are so many components can be extracted, the implementation of components will be completed in the project, and then introduced into the scaffolding of the component library

Focus on

The biggest obstacle for the development of the whole component library is the construction of the scaffolding of the component library. By referring to the development scheme of various component libraries on Github, this problem has been solved and the VUE component library which can be used in the production environment and is based on the NPM package system has been successfully built. As the whole component library is still in the early stage, there are many subsequent configuration and components to improve, but for the students like the development of a set of their own component library is a good news, the shelf is not very complex, for the students who contact this program will not be so headache to learn.

Core configuration file:

// 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 = webpackConfigCopy the code
// 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 = webpackConfigCopy the code

See The Evell Component Library address for scaffolding details

remarks

Hope everyone can be separated from the tedious repetitive work, become a “lazy” front-end developers 😝