Rollup 优点

输出结果更加扁平
自动移除为引用代码
打包结果依然完全可读

Rollup 缺点

加载非 ESM 的第三方模块比较复杂
模块最终都被打包到一个函数中，无法实现 HMR
浏览器环境中，代码拆分功能依赖 AMD 库

1. 项目目录结构

新建文件夹，在文件夹下新建 src 目录，执行 npm init

src/index.js

js 复制代码

import { log } from 'logger'
import messages from './messages'

// 使用模块成员
const msg = messages.hi
log(msg)

src/logger.js

js 复制代码

export const log = (msg) => console.log(`log ${msg}`)
export const error = (msg) => console.log(`error ${msg}`)

src/messages.js

js 复制代码

export default {
    hi: 'hello, Rollup'
}

2. 使用 rollup

安装组件包

bash 复制代码

yarn add rollup --save

打包浏览器

bash 复制代码

yarn rollup ./src/index.js --format iife --file dist/bundle.js

打包的内容，只对引用的数据进行了打包，自行处理了依赖

2.1 配置文件

rollup.config.js

arduino 复制代码

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

配置后可以直接运行进行打包

sql 复制代码

yarn rollup --config

如果执行yarn rollup --config报错，则需要在package.json里添加 "type": "module"

报错

修改package.json

后期使用时可以根据配置文件不同区分不同的环境构建配置 yarn rollup --config rollup.config.js （可以根据环境设置不同的文件名称）

2.2 使用插件

以rollup-plugin-json插件为例
- 安装rollup-plugin-json
bash 复制代码
```
yarn add rollup-plugin-json --dev
```
- 调整配置文件
引入的函数的运行结果，不是直接引用函数
- 直接使用
- 打包文件

2.3 加载 npm 模块

安装rollup-plugin-node-resolve

bash 复制代码

yarn add rollup-plugin-node-resolve --dev

补充相应的插件配置

引入的函数的运行结果，不是直接引用函数

js 复制代码

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()
    ]
}

引用测试

js 复制代码

import { log } from 'logger'
import messages from './messages'
import { name, version } from '../package.json'
import _ from 'ladash-es'
// 使用模块成员
const msg = messages.hi
log(msg)
log(`name:${name} version:${version}`)
log(_.sum([1, 2, 3]))

打包测试yarn rollup --config

js 复制代码

(function (logger, _ ) {
    'use strict';

    var messages = {
        hi: 'hello, Rollup'
    };

    var name = "pop-monitor-sdk";
    var version = "1.0.0";

    // 使用模块成员
    const msg = messages.hi;
    logger.log(msg);
    logger.log(`name:${name} version:${version}`);
    logger.log( _ .sum([1, 2, 3])); 

})(logger, _);

2.4 加载 commonJS模块

安装rollup-plugin-commonjs

sql 复制代码

yarn add rollup-plugin-commonjs  --dev

补充相应的插件配置

js 复制代码

+import commonjs from 'rollup-plugin-commonjs'
+ commonjs()

添加文件src/cjs-module.js

js 复制代码

module.exports = {
    foo: 'bar'
}

引用测试

js 复制代码

import cjs from './cjs-module'
log(cjs)

打包测试yarn rollup --config

2.5 代码拆分

src/index.js

js 复制代码

import('./logger').then(({ log }) => {
    log('hello, Rollup')
})

尝试打包，不是浏览器模式不支持，调整为 amd

使用 amd，会分包处理，之前的配置不支持

css 复制代码

yarn rollup --config --format amd

调整配置文件

进行了分包yarn rollup --config

2.6 多入口打包

2.6.1 准备多入口文件

src/fetch.js

js 复制代码

export default endpoint => {
    return fetch(`https://jsonplaceholder.typicode.com${endpoint}`)
        .then(response => response.json())
}

src/album.js

js 复制代码

import fetchApi from './fetch'
import { log } from './logger'
fetchApi('/photos?albumId=1').then(data => {
    data.forEach(item => {
        log(item)
    });
})

src/index.js

js 复制代码

// 测试多入口代码
import fetchApi from './fetch'
import { log } from './logger'
fetchApi('/posts').then(data => {
    data.forEach(item => {
        log(item)
    });
})

2.6.2 配置文件调整

调整入口文件问多入口

js 复制代码

 input: {
        index: 'src/index.js',
        album: 'src/album.js'
}

打包预览yarn rollup --config
- 以配置设置的文件名称为打包后的文件入口
- 公共的模块会统一提取成公共文件
- album
- index

2.6.3 测试打包库的运行效果

新增 index.html，在dist/index.html中添加引用

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js" data-main="album.js"> </script>
</body>

</html>

新增 index.html，在dist/index.html中添加引用

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js" data-main="album.js"> </script>
</body>

</html>

在浏览器运行
- 加载的包
- 运行效果

Rollup 快速入门，JDK 打包必备

Rollup 优点

Rollup 缺点

1. 项目目录结构

2. 使用 rollup

2.1 配置文件

2.2 使用插件

2.3 加载 npm 模块

2.4 加载 commonJS模块

2.5 代码拆分

2.6 多入口打包

2.6.1 准备多入口文件

2.6.2 配置文件调整

2.6.3 测试打包库的运行效果