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
bashyarn 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>-
在浏览器运行
- 加载的包
- 运行效果
