前端工程化实战 - Rollup、Parcel 打包

Rollup 打包

Rollup 概述

Rollup 同样也是一款 ES Modules 的打包器，它也可以将项目当中的散落的细小模块打包为整块的代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者NodeJS环境。

• Rollup 与 Webpack 作用类似
• Rollup 更为小巧，仅仅是一款 ESM 打包器
• Rollup 中并不支持类似 HMR 这种高级特性
• Rollup 并不是要与 Webpack 全面竞争
• Rollup 提供一个充分利用 ESM 各项特性得高效打包器

Rollup 快速上手

项目代码

yarn add rollup --dev

yarn rollup [入口文件：.sec/index.js] --format [输出格式：自调用函数iife] --file [输出路径：dist/bundle.js]

• Rollup 默认会开启 Tree Sharking 优化输出结果

Rollup 配置文件

rollup.config.js 文件运行在NodeJS环境，Rollup 自身会额外处理这个配置文件，所以可以直接使用 ESM

// rollup.config.js
export default {
   
  input: 'src/index.js', // 入口文件路径
  output: {
    // 输出相关配置 （对象）
    file: 'dist/bundle.js', // 输出文件名
    format: 'iife' // 输出格式
  }
}

yarn rollup --config [rollup.config.js] // 需要指明配置文件 默认 rollup.config.js

Rollup 使用插件（rollup-plugin-json）

Rollup 自身的功能就只是 ES Modules 模块的合并打包，如果项目有更高级的需求，例如 想要加载其他类型资源模块 或是 导入 CommonJS模块 又或是 编译 ECMAScript新特性。

• Rollup 支持使用插件的方式扩展
• 插件是 Rollup 唯一扩展途径（不像Webpack划分Loader Plugin Minimizer 三种扩展方式）

这里尝试导入可以让项目代码导入Json文件的插件

yarn add rollup-plugin-json --dev

import json from 'rollup-plugin-json' // 默认导出插件函数

export default {
   
  ...
  plugins: [
    json() // 调用结果而不是函数
  ]
}

// src/index.js

// 导入模块成员
import {
    log } from './logger'
...
import {
    name, version } from '../package.json'

// 使用模块成员
...
log(name)
log