本着研究精神，进行对比实验
背景：进行EPG开发，由于机顶盒兼容问题，我们开发的时候不能使用高级一点的语法，包括CSS3和ES6，在大部分盒子上都有兼容问题。但是，随着技术的发展，前端开发已经模块化，怎么把最新的技术和实际的业务结合起来，是本研究项目的最终目的。
目标：
1、把TS文件打包成js文件，不会生成很多冗余代码，避免兼容问题是由于打包工具引入的。
2、import引入的代码会被拷贝到目标文件中，同时不会有冗余代码
3、所有的const/let 转换成 var 定义变量
4、其他ES6的语法转换成低版本语法
步骤：
- 1、寻找工具（集成方案）
- 2、配置打包
- 3、编写代码验证，源文件
实施过程：
1、webpack
webpack5的打包，同一个文件，在没有缓存的情况下第一次运行，用时12.46s。第二次运行时间就是毫秒级别了，
打包代码会自动进行压缩成一行，多余的注释会被删除，为了阅读方便，我们把打包后的代码进行格式化后阅读。文件大小格式化前7KB，格式化后9KB
输出格式可配置iife，控制外层是否包裹生成的代码，默认这个选项是true，如果需要可以设置为false
bundle_webpack_default.js代码是被函数包裹的。所有的const定义全都转换成了var，引入的方法拷贝到目标文件中，所有的变量进行了转义。看起来没有冗余代码。==========第一次打包时间太长
bundle_webpack_iife.js相当于执行了一次代码合并的操作。有const定义存在，把引入的代码拷贝到目标文件中了，没有冗余代码。==========代码转换不彻底
2、rollup
rollup4的打包，同一个文件，在没有缓存的情况下第一次运行，用时2s左右。第二次运行时间依然是2s左右
打包代码没有进行任何压缩，源文件中的注释代码一起拷贝到目标文件中了，文件大小12KB
rollup.js相当于执行了一次代码合并的操作。所有的const定义全都转换成了var，引入的方法拷贝到目标文件中，所有的变量进行了转义。看起来没有冗余代码。==========可以把注释代码一起拷贝到目标文件中，但是打包时间太长，多个文件就更久了
2.2、gulp+rollup
采用此方式的原因是除了要处理ts文件还有html、样式文件和图片需要处理，而webpack只需要增加插件就可以达到目的。
gulp读取要处理的ts文件，扩展开发gulp的插件（gulp-rollup.js ），插件中利用rollup把要处理的文件进行处理，输出文本扔给gulp，gulp输出实体文件。rollup本来是输出文件到指定目录下的，但是文件名需要枚举，所以拿到文本后通过gulp来丢目标文件
输出文件和单独用rollup输出文件一致，这里就不单独贴输出文件了。
3、parcel
parcel2的打包，同一个文件，用时毫秒级别
代码文件大小9KB
parcel.js代码是被函数包裹的。所有的const定义全都转换成了var，引入的方法拷贝到目标文件中，所有的变量进行了转义。会增加冗余代码（对 module.exports 的解释代码）==========但是打包时间很快，html、css、图片全都一起处理，但是会增加冗余代码
4、gulp+swc+esbuild
gulp的其他库用来处理html、css和图片文件，esbuild对标webpack处理ts模块化，swc对标babel进行转义
同一个文件，在没有缓存的情况下第一次运行，用时毫秒级别。第二次运行时间更短
代码文件大小9KB
esbuild_swc.js相当于执行了一次代码合并的操作。所有的const定义全都转换成了var，引入的方法拷贝到目标文件中，所有的变量进行了转义。看起来没有冗余代码。==========打包时间很快，没有冗余代码，同样也没有代码注释，有可能是需要配置。目前研究下来这种方式是最优的