Rollup

Rollup

1）快速上手

npm i rollup -D  安装

npx rollup .\src\index.js --file ./dist/bundle.js 打包
npx rollup .\src\index.js --format iife --file ./dist/bundle.js 打包（立即执行函数）

2）使用插件

• rollup-plugin-json

import json from 'rollup-plugin-json'

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife', // 输出格式
    },
    plugins: [
        json()
    ]
}

• rollup-plugin-node-resolve 加载npm模块

rollup 默认只能按路径查找模块，rollup-plugin-node-resolve用来告诉rollup查找外部模块(node_modules)

• rollup-plugin-commonjs 加载CommonJS模块

由于rollup 默认只处理 ES Module 模块打包

3) 代码拆分、动态导入

output: {
        // file: 'dist/bundle.js',
        // format: 'iife', // 输出格式

        //代码拆分、动态导入
        dir: 'output',
        // format: 'amd'
    },

4) 多入口打包

// 多入口打包
export default {
    // input: ['src/index.js', 'src/album.js'],
    input: {
      foo: 'src/index.js',
      bar: 'src/album.js'
    },
    output: {
      dir: 'dist',
    //   format: 'amd'
    }
  }

5) roullp / webpack 选用原则

• rollup 优点
  • 输出结果更加扁平
  • 自动移除未引用代码
  • 打包结果既然完全可读
• rollup 缺点
  • 加载非 ESM 的第三方模块比较复杂
  • 无法实现HMR

开发应用程序 ------- webpack ------大而全

开发一个框架或者类库(如vue, react) ------ rollup ------小而美

parcel 零配置的前端应用打包器（2017）

• 背景

当时的 Webpack 使用上过于繁琐

• 核心特点
  • 完全零配置
  • 自动安装依赖
  • 构建速度更快（内部多进程同时工作）
• vs webpack
  • webpack 有更好的生态
  • webpack 越来越好用