前端模块化开发-Rollup（笔记）

前端模块化开发-Rollup（笔记）

Rollup

Rollup与Webpack类似，都是前端打包工具，但是其更小巧，仅仅是一款ESModules打包器，没有WP那么功能强大。
Rollup打包结果非常简洁，就是把我们的各个模块儿的代码，按导入顺序放入一个js中，并且自动Tree Shaking去除冗余代码。

rollup.config.js

// rollup.config.js
// 使用ESM规范导入
import json from 'rollup-plugin-json' // json模块
import resolve from 'rollup-plugin-node-resolve' // 加载NPM模块
import commonjs from 'rollup-plugin-commonjs' // 兼容CommonJS规范的模块
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife' //制定输出格式 iife自执行函数
  },
  plugins: [ //插件的使用，传入函数调动的结果
    json(),
    resolve(),
    commonjs()
  ]
}

Rullup的优劣势
优点:

• 输出结果更加扁平，执行效率更高；
• 自动移除未引用代码，Tree Shaking;
• 打包结构依然简单，完全可读；

劣势：

• 加载非ESModules的第三方模块比较复杂；
• 模块最终都被打包到一个函数中，无法实现HMR;
• 浏览器环境中，代码拆分功能依赖AMD库；

当开发一个框架或者类库时，大多使用Rullup，大多数知名的框架/库中都使用Rollup像React和Vue。
选择是，开发应用程序使用Webpack，库/框架开发使用Rullup。经验之选

Parcel

使用非常简单，完全零配置，启动一个parcel命令后，便可编写代码。

• 会自动安装依赖；
• 会自动启动开发服务，实现HMR；
• 并且构建速度更快，多进程同时工作；

2017年发布，属于新技术，技术走向越来越简约。