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样式文件打包方式

版权声明：本文为yaokunlun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/yaokunlun/p/14340925.html