Rollup

www.rollupjs.com/

• Rollup 与 Webpack 作用类似
• Rollup 更为小巧
• 仅仅是一款 ESM 打包器
• Rollup 中并不支持类似 HMR 这种高级特性
• Rollup 并不是要与 Webpack 全面竞争, 只是提供一个充分利用 ESM 各项特性的高效打包器
• 如果想使用非 ESM，则需要额外配置

1. 快速上手

# 安装
yarn add rollup -D

# 执行
yarn rollup ./src/index.js --format iife
# 这里的 --format 是指定输出格式
# iife 是指浏览器中常用的 自调用函数
复制代码

2. 配置文件

• 创建一个 rollup.config.js 文件

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  }
}

复制代码

# 有了配置文件执行命令 使用 --config 表明使用配置文件
yarn rollup --config
yarn rollup --config rollup.config.js  # 指明使用的配置文件
复制代码

3. 使用插件

如果需要加载其它类型资源模块或者在代码中要导入 CommonJS 模块

• 插件是 Rollup 唯一扩展途径

• eg

// yarn add rollup-plugin-json -D
import json from 'rollup-plugin-json'
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()
  ]
}

// 在 main.js当中导入json中的值
import { name, version } from './package.json'
console.log(name)
console.log(version)

// 打包结果会只有 name和version 其它的被 Tree Snaking掉了
复制代码

4. 加载 npm 模块

Rollup 默认只能根据文件路径去加载本地模块，对于 node_modules 下的模块没法想 Webpack 那样导入

• 因此可使用插件 rollup-plugin-node-resolve

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'

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

// main.js 下载 lodash-es  esm版本
console.log(lodashcamelCase('hello world'))

复制代码

5. 加载 CommonJS 模块

• 官方给了插件支持 rollup-plugin-commonjs

import commonjs from 'rollup-plugin-commonjs'

export default {
  plugins: [
    commonjs()
  ]
}

复制代码

6. 代码拆分

要使用代码拆分，–format格式必须是amd或commonjs

export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: 'dist',
    format: 'amd'
  }
}

复制代码

7. 多入口打包

多入口打包默认会提取公共模块，意味着会走代码拆分，所以format不能是 iife 格式了

export default {
  // 这两种都可以
  // input: ['src/index.js', 'src/album.js'],
  input: {
    foo: 'src/index.js',
    bar: 'src/album.js'
  },
  output: {
    dir: 'dist',
    format: 'amd'
  }
}
复制代码

<!-- 在浏览器端使用打包好的dist目录文件 -->
<!-- 需要引入require.js -->
<script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
复制代码

8. Rollup / Webpack 的选择原则

• Rollup 的优势
  • 输出结果更加扁平
  • 自动移除未引用代码
  • 打包结果依然完全可读
• Rollup 的缺点
  • 加载非 ESM 的第三方模块比较复杂
  • 模块最终都被打包到一个函数中，无法实现 HMR
  • 浏览器环境中，代码拆分功能依赖 AMD 库

如果我们正在开发应用程序

• Rollup 显得有点欠缺

如果我们正在开发框架或者类库

• Rollup 比较不错，因为在开发类库时很少依赖第三方模块

所以很多知名框架 / 库 都在使用 Rollup

tips: 社区中希望二者并存，希望更专业的工具做到更专业的事情

Webpack 大而全，Rollup 小而美

Parcel

1. Parcel 零配置的前端应用打包器 【一个字（舒服）】

希望给开发的体验是你想做什么，就去做什么。额外的事情就交给工具去做

• Parcel 首个版本发布于2017年
• 出现的原因是-当时的 Webpack 使用上过于繁琐

    # 安装
    yarn add parcel-bundler -D
复制代码

• Parcel 与 Webpack 一样，都支持以任意模块为打包入口
• 但官方建议以 .html 为入口 – 因为 html 是我们运行在浏览器端的入口

yarn parcel src/index.html
# 会根据 index.html 当中的script标签引入的模块一直往下找
复制代码

• 模块热替换是支持的

if (module.hot) {
  module.hot.accept(() => {
    console.log('hmr')
  })
}
复制代码

• 自动安装依赖

在代码中可以直接导入

import $ from 'jquery'
$('body').append('<h1>Hello World</h1>')
// 会自动安装 jquery
复制代码

• 同样支持其它类型模块 – 也是零配置的

2. 如何以生产模式打包

# 使用 build 命令 后面跟上模块的入口文件就可以了
yarn parcel build src/index.html
复制代码

对于相同体量的项目打包，parcel 的构建速度会比 webpack 快很多，因为在 parcel 内部它使用的是双进程同时去工作，充分发挥了多核 CPU 的性能，那 webpack 也可以使用叫做 happypack 的一个插件来去实现这一点

绝大部分项目还是用的 Webpack ，有更好的生态，Webpack 也越来越好用