一、打包工具 rollup

Vue.js 源码、react源码的打包工具使用的是 Rollup，比 Webpack 轻量，

  • webpack适⽤于⼤型复杂的前端站点构建: webpack有强⼤的loader和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。⽴即执⾏函数内部则处理模块之间的引⽤，执⾏模块等,这种情况更适合⽂件依赖复杂的应⽤开发。
  • rollup适⽤于基础库的打包，如vue、d3等: Rollup 就是将各个模块打包进⼀个⽂件中，并且通过 Tree-shaking 来删除⽆⽤的代码,可以最⼤程度上降低代码体积,但是rollup没有webpack如此多的的如代码分割、按需加载等⾼级功能，其更聚焦于库的打包，因此更适合库的开发

package.json文件

  1. "scripts": {
  2.   "dev": "rollup -w -c scripts/config.js--sourcemap --environment TARGET:web-full-dev",
  3.     ...
  4.     }

-w 添加watch，代码改变立即执行打包；
-c 配置文件scripts/config.js
—sourcemap 脚本中添加参数 —sourcemap

二、 Vue的不同版本的构建

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码
版本分为UMD、conmmonJS、ES Module
CommonJS 采用同步加载模块，而加载的文件资源大多数在本地服务器，所以执行速度或时间没问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。

  • CommonJS 同步加载
  • AMD 异步加载
  • UMD = CommonJS + AMD
  • ES Module 是标准规范, 取代 UMD