前端工程化——其他打包工具

Rollup

概述

• 仅仅是一款ESM的合并、打包器，并无奇他额外的类似于webpack的功能
• 更为小巧
• Rollup 中并不支持类似 HMR 这种高级特性
• Rollup 并不是要与 Webpack 全面竞争
• 提供一个充分利用ESM各项特性的高效打包器

快速上手

命令行方式

• 安装yarn add rollup --dev
• 使用 yarn rollup，即不传递任何参数的情况下，会出现帮助信息
• yarn rollup ./src/index.js --format iife --file dist/bundle.js
  • 第一个参数是入口文件
  • 第二个参数是输出格式，上述采用的是自执行函数的格式
  • 第三个参数是输出的文件路径
• 输出的结果只会保留用到的部分，会自动使用tree-shaking的方式打包代码，十分简洁

配置文件方式

• 新建rollup.config.js文件

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

• 运行yarn rollup --config来实现以配置文件的形式启动，还可以后面指定不同环境的入口文件
  • yarn rollup --config rollup.prod.js
  • yarn rollup --config rollup.dev.js

使用插件

• 加载其他类型的文件

• 导入 CommonJS 模块

• 编译 ECMAScript 新特性

• Rollup 支持使用插件的方式扩展

• 插件是Rollup唯一扩展途径，而webpack有loader，plugin，minimizer三种

• 使用：

  • 以导入json文件的插件为例
    • 安装：yarn add rollup-plugin-json --dev
    • 配置文件中进行配置

  // rollup.config.js
  import json from 'rollup-plugin-json'  // 默认导出的是一个函数
  
  export default {
       
    input: 'src/index.js',
    output: {
       
      file: 'dist/bundle.js',
      format: 'iife'
    },
    plugins: [
      json()  // 将模块暴露的方法函数的执行结果放进数组中
    ]
  }
  
  
  // index.js
  // 导入模块成员，默认情况下rollup只能用路径的方式导入模块，并不能像webpack那样用名称导入node_module中的npm模块
  import {
        log } from