基于element-ui的vue大数据表格el-bigdata-table组件打成压缩包引入传统项目时的问题

问题背景：

前段时间，项目中的一些功能需要查看大量的业务数据且不分页造成页面table在数据量千条级别时页面就已经快卡死了。时不时的就会内存溢出了。于是就要优化。

在看解决方案的时候，DMap的解决方案映入了眼帘。技术专栏 | DMap——实战Vue百万条数据渲染表格组件开发

该组件采用了实时计算、虚拟渲染的方式，很好的优化了前端table在大量数据面前的孱弱表现。具体算法原理可参看上面的技术文章。但遗憾的是，该组件是用npm搭的前端web应用，没法直接用。

因为公司项目的前端采用的是vue.js+element-ui的架构，但，是传统的那种组织形式没有进行前后分离，意味着不能使用npm、ES6等。所以就必须使用webpack把该组件压成一个js文件，以<script>标签形式引入项目。正好github上有一个对vue-bigdata-table进行二次封装的组件，于是就打包拿来用了

但是，博客和github上的具体使用描述比较模糊，故自己记录一下使用过程及遇到的一些坑

预设环境：node.js -v10.13.0   npm -v6.4.1

第一步：首先，获取到项目实例--vue-element-bigdata-table github获取地址：vue-element-bigdata-table

第二步：按照README.md文件中的构建方式，npm install按照项目依赖后，使用npm脚本（封在了项目的package.json文件中，打开可以看到其实执行的是

cross-env NODE_ENV=production webpack --progress --hide-modules

）npm run dist进行生产打包。

报错：

ERROR in vue-element-bigdata-table.min.js from UglifyJs
Unexpected token: operator (>) [./node_modules/element-ui/src/mixins/emitter.js:2,0][vue-element-bigdata-table.min.js:13115,32]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vue-element-bigdata-table@1.3.1 dist: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vue-element-bigdata-table@1.3.1 dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\CPIC\AppData\Roaming\npm-cache\_logs\2018-11-24T04_31_09_618Z-debug.log

其实这个报错是指：不能解析">"这个语法token，位置呢，就在原项目的 ./node_modules/element-ui/src/mixins/emitter.js这个文件的2,0位置，压缩文件的vue-element-bigdata-table.min.js的13115,32这个位置，如果你打开这两个位置，你会发现代码其实是一模一样的。意味着webpack的babel转换器没有将报错的源文件的ES6语法转为ES5语法，怪不到会报错。

于是你需要在webpack.config.js文件的这个位置，将需要转换的js通过include也加进去,在此项目中就不要一个一个加了，看上面报错的文件是element-ui依赖的ES6语法原因，所以就整个都把element-ui文件下的所有文件都转了就ok了

{
     test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/,
     include: [
       resolve(__dirname, '../config'),//不加path可能会报resolve is not define
       path.resolve(__dirname, '报错的文件'),
     ]
},

 

resolve是node.js中Path对象的一个方法，一般调用的话不用加Path.的，类似于js中不用加window对象一样。但不知道为什么就是不行，不过加上Path就ok了

第三步：将压缩成的vue-element-bigdata-table.min.js 引入项目使用即可。标签为<el-bigdata-table></el-bigdata-table>

哎，前端这几年这是变化大啊，是一种全新的开发和组织形式了。有一种2.0革命的感觉。各种新规范、新框架、小工具层出不穷。有时候很多名词都没听过，所以在一面用的过程中，再一面去了解。最后发现其实蛮简单的一个东西，自己去看新名词背后所包含的定义费了蛮久时间。也是有点类似中年贫穷的那种辛酸feel的~  哈哈哈