简介截屏2020-09-09 10.02.18.png

VUE在开发的时候用的是webpack,但是最后将文件打包在一起的时候用的是 rollup.js

rollup VS webpack

rollup更适合构建javascript库,也可用于构建绝大多数应用程序;但是rollup 还不支持一些特定的高级功能，尤其是用在构建一些应用程序的时候，特别是代码拆分和运行时态的动态导入 .如果你的项目中需要这些功能,则使用webpack更为适合;

rollup优势

  • 自动 Tree-shaking(Tree-shaking, 也被称为 “live code inclusion,” 它是清除实际上并没有在给定项目中使用的代码的过程，但是它可以更加高效。)
  • 打包速度快
  • 配置简单

    安装

    1. yarn add rollup -D

    如果没用npm来管理依赖包，推荐初始化一下

    1. npm init -y

    新建配置文件

    1. export default {
    2. input: 'src/main.js',
    3. output: {
    4.     file: 'output/bundle.js',
    5.     format: 'cjs'
    6. }
    7. };

    修改package.json

    1. "scripts": {
    2.   "test": "echo \"Error: no test specified\" && exit 1",
    3.   "serve": "rollup -c rollup.config.js  --watch",
    4.   "build": "rollup -c rollup.config.js"
    5. },
    —watch ,热更新，自动重新打包

更多信息请在官网学习
https://rollupjs.org/guide/en/