@[TOC](Rollup 学习笔记)

一、Rollup的认识

rollup官方文档

相比于webpack来说

• 更为小巧，简单易用。
• Rollup 仅仅使一款ESM打包器（默认只能够处理 ESM 的模块），而webpack配合plugins可以实现大部分前端工程化的需求。
• 打包的结果更加的扁平。打包会以 tree-shaking 的形式进行打包，自动移除为引用的代码

// rollup.config.js
// rollup 允许导出以 ESM 标准进行导出，它内部会做处理，CMJ标准同样可行。
export default {
  input: 'src/index.js', // 指定入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件名 
    format: 'iife', // 输出文件格式
  } 
}

// module.exports = {
//   input: 'src/index.js', // 指定入口文件
//   output: {
//     file: 'dist/bundle.js', // 输出文件名 
//     format: 'iife', // 输出文件格式
//   }
// }

二、Rollup插件的使用

1. rollup-plugin-json

打包的过程中可以处理 在代码中使用json文件

// rollup.config.js
// rollup 使用插件
import json from 'rollup-plugin-json' // 换成 CMS 导入也可以，rollup.config.js 运行在node环境下的

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

2. rollup-plugin-node-resolve

打包的过程中可以处理 在代码中使用 import 导出 npm 模块

// rollup 使用插件
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'

export default {
  input: 'src/index.js', // 指定入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件名 
    format: 'iife', // 输出文件格式
  },
  plugins: [
    json(),
    resolveNode()
  ]
}

3. rollup-plugin-commonjs

打包的过程中可以处理 在代码中直接使用 CMJ 模块

// rollup 使用插件
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'
import cmj from 'rollup-plugin-commonjs'
export default {
  input: 'src/index.js', // 指定入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件名 
    format: 'iife', // 输出文件格式
  },
  plugins: [
    json(),
    resolveNode(),
    cmj()
  ]
}

三、Rollup 的代码拆分 code-split

Rollup 的代码拆分与webpack一样，如果我们使用了 ESM 动态导入了一个模块的话，rollup 起内部就会进行代码分包，实现按需加载。

需要注意的点是

• 如果要使用代码拆分，打包的格式在浏览器环境要使用 Amd标准 Error: UMD and IIFE output formats are not supported for code-splitting builds.

• 动态导入会分多个包，配置需要使用 output.dir, 配置输出路径 [!] Error: When building multiple chunks, the "output.dir" option must be used, not "output.file". To inline dynamic imports, set the "inlineDynamicImports" option.

// rollup 使用插件
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'
import cmj from 'rollup-plugin-commonjs'
export default {
  input: 'src/index.js', // 指定入口文件
  output: {
    // file: 'dist/bundle.js', // 输出文件名 
    dir: 'dist',
    format: 'amd', // 输出文件格式
  },
  plugins: [
    json(),
    resolveNode(),
    cmj()
  ]
}

四、Rollup 多入口打包

Rollup在进行多入口文件打包的时候会自动对公共部分进行提取到单独的一个包中。

1. 实现

// rollup 使用插件
import json from 'rollup-plugin-json'
import resolveNode from 'rollup-plugin-node-resolve'
import cmj from 'rollup-plugin-commonjs'
export default {
  input: {
    index: 'src/index.js',
    entry2: 'src/entry2.js'
  }, // 指定入口文件
  output: {
    // file: 'dist/bundle.js', // 输出文件名 
    dir: 'dist',
    format: 'amd', // 输出文件格式
  },
  plugins: [
    json(),
    resolveNode(),
    cmj()
  ]
}

结果

2. 使用

使用的话需要使用requireJs 的库来支持AMD标准

五、Rollup 与 Webpack 选用原则

Rollup 的缺点：

• 加载非 ESM 的第三方模块比较复杂。
• 要使用代码拆分的话，必须要使用 AMD 标准，然而AMD标准打包的结果还不能够直接在script标签中使用，需要依赖第三方amd的库
• 所有模块最终都被打包到一个函数中，无法使用 HMP 进行模块热替换。

根据 Rollup && webpack 优缺点，选择原则（经验法则）为

• 如果是需要开发 类库 和 框架 我们可以使用 Rollup作为打包工具。 vue就是使用rollup作为打包工具。
• 如果是开发应用程序的话使用webpack

Parcel

一款零配置的前端应用打包器 parcel中文文档

parcel集成的功能（更多功能去官方文档查看）

• HMR
• 在dev环境内置开发服务器
• babel，css压缩等等
• 使用ESM动态导入，会自动分包
• 代码中使用第三方模块，会自动帮忙安装
• 支持以下资源类型的打包
• 同体量的包parcel 打包速度会比webpack快，这个是因为使用了多进程同时去工作发挥多核 CPU 电脑的威力。webpack也可以使用happypack插件实现。

1. 直接使用parcel Cli命令

parcel建议入口文件为 index.html文件，会按照index.html文件中所引用的资源去打包

• parcel + 入口文件 （开发环境）
• parcel build + 入口文件 （生产环境）
•