基于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样式文件打包方式
posted @ 2021-01-28 17:11  yaokunlun  阅读(2735)  评论(0)    收藏  举报