基于ElementUI封装组件库（一）

1.fork elementUI

2.精简代码 （代码地址 https://github.com/yklhello/basic-element.git）

3.剖析结构

基础剖析

(1) ElementUI按需引入和全量引入原理

全量：

import ElementUI from 'element-ui'

 

Vue.use(ElementUI)

 

 

核心代码

src/index.js

/* Automatically generated by './build/bin/build-entry.js' */

import EncounterFilter from '../packages/encounterFilter/index.js'
import Footer from '../packages/footer/index.js'

const components = [
  EncounterFilter,
  Footer
]

const install = function (Vue, opts = {}) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  version: '0.0.3',
  install,
  EncounterFilter,
  Footer
}

项目中使用 Vue.use() 会调用插件的install方法，如上Vue.use(ElementUI)会自动在全局注册所有组件

 

按需：

import { Select } from 'element-ui'

Vue.use(Select)

 

核心代码

packages/xxx/index.js

import Select from './src/Select'

Select.install = function (Vue) {
  Vue.component(Select.name, Select)
}

export default Select

Vue.use(Select) 同样会调用install方法，注册当前组件，避免包过大

(2) 按需引入和全量引入的打包方式区别

全量引入
build/webpack.common.js 将elementUi打包成一个element-ui.common.js文件

module.exports = {
  entry: {
    app: ['./src/index.js']
  },
  output: {　　　　‘
　　　path: path.resolve(process.cwd(), './lib'),

　　　　publicPath: '/dist/',

　　　　filename: 'element-ui.common.js', // 输出文件名称

　　　　chunkFilename: '[id].js',

　　　　libraryTarget: 'commonjs2'

  }
...        
}

libraryTarget相关

libraryTarget:“commonjs”，在export对象上定义library设置的变量。在node中支持，浏览器中不支持。

libraryTarget:“commonjs2”，直接用module.export导出export，会忽略library设置的变量。在node中支持，在浏览器中不支持。 开发中可以 import ElementUI from 'element-ui'

libraryTarget:“amd”，在define方法上定义library设置的变量，不能用script直接引用，必须通过第三方模块RequireJS来时用

libraryTarget:“umd”，该方案支持commonjs、commonjs2、amd，可以在浏览器、node中通用。

常用 commonjs2，umd

 

按需引入，多文件入口，将elementUI分组件打包

　const Components = require('../components.json');

 

const webpackConfig = {
  entry: Components,
  output: {
    path: path.resolve(process.cwd(), './lib'),
    publicPath: '/dist/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    libraryTarget: 'commonjs2'
  },
...
}

 

下一章介绍elementUI样式文件打包方式