Rollup 简易入门示例教程

目录

• Rollup介绍及使用
• 1、Rollup 概述
• 2、Rollup 快速上手
• 3、Rollup 配置文件
• rollup.config.js
• 4、Rollup 使用插件
• rollup.config.js
• 5、Rollup 加载 NPM 模块
• rollup.config.js
• 6、Rollup 加载 CommonJS 模块
• rollup.config.js
• 7、Rollup 代码拆分
• index.js
• rollup.config.js
• 8、Rollup 多入口打包
• rollup.config.js
• 方式1:
• 方式2:
• 9、Rollup 选用原则
• 10、Parcel

Rollup介绍及使用

1、Rollup 概述

• 仅仅是 ES Module 的打包器
• Rollup 与 Webpack 作用类似，相比于Webpack，Rollup更为小巧
• Rollup 中并不支持类似 HRM 特性

初衷：提供一个充分利用ESM(ES Module)各项特性的高效打包器

2、Rollup 快速上手

安装:yarn add rolluo --dev
用法:
    yarn rollup  //不传递任何参数的情况下，打印Rollup的帮助信息
    yarn rollup ./src/index.js --format iife //执行index.js文件并以iife(自调用函数)的方式输出(--format指定输出格式)
    yarn rollup ./src/index.js --format iife --file dist/bundle.js //输出文件到dist/bundle.js
默认开启chunk去掉多余代码，优化输出结果

3、Rollup 配置文件

rollup.config.js

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

4、Rollup 使用插件

插件是Rollup的扩展途径

rollup.config.js

5、Rollup 加载 NPM 模块

Rollup默认只能根据文件路径加载本地的文件模块，第三方模块不能直接通过模块名称去导入

rollup-plugin-node-resolve:安装后Rollup可直接通过模块名称导入模块
安装:yarn add rollup-plugin-node-resolve --dev

rollup.config.js

import resolvefrom 'rollup-plugin-node-resolve'
export default {
input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
format: 'iife'
    },
    plugins: [
        resolve()
    ]
}

6、Rollup 加载 CommonJS 模块

rollup-plugin-commonjs:因为Rollup默认只能处理ESM模块，使用这个插件Rollup就可以处理CommonJS

安装:yarn add rollup-plugin-commonjs --dev

rollup.config.js

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

7、Rollup 代码拆分

运行:yarn rollup

index.js

import('./logger').then(({ log }) => {
    log('code splitting~')
})

rollup.config.js

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

8、Rollup 多入口打包

多入口打包内部会自动提取公共模块，也就是说内部会使用代码拆分

rollup.config.js

方式1:

export default {
input: ['src/index.js', 'src/album.js'],
    output: {
        dir: 'dist',
        format: 'amd'
    }
}

方式2:

export default {
input: {
        foo: 'src/index.js',
        bar: 'src/album.js'
    },
output: {
dir: 'dist',
        format: 'amd'
    }
}

9、Rollup 选用原则

Rollup优势:
    输出结果更加扁平(执行效率更高)
    自动移除未引用的代码
    打包结果依然完全可读(和手写代码一致)

Rollup缺点:
    加载非ESM的第三方模块比较复杂(需要配置一大堆插件)
    模块最终都被打包到一个函数中，无法实现HMR
    浏览器环境中，代码拆分功能依赖AMD库

选用:
    开发应用程序    选用Webpack，大而全
    开发框架或类库  选用Rollup，小而美

10、Parcel

零配置的前端应用打包器

安装:

yarn add parcel-bundler --dev 

运行:

yarn parcel src/index.html 
//index.html为入口文件 

优势:
支持自动安装依赖 支持动态导入 相同体量下，Parcel比Webpack打包要快，因为Parcel使用的是多进程同时工作，充分发挥了多核CPU的性能(Webpack也可以使用happypack插件实现多进程)

以上就是Rollup 简易入门示例教程的详细内容，更多关于Rollup 入门教程的资料请关注脚本之家其它相关文章！