Part2-2-3 Rollup
Posted 沿着路走到底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Part2-2-3 Rollup相关的知识，希望对你有一定的参考价值。
Rollup 仅仅是一款 ESM 打包器
提供一个充分利用 ESM 各项特性的高效打包器
Rollup 默认只能处理 ESM 模块
安装：yarn add rollup --dev
rollup 打包会自动开启 Tree Shaking
配置文件
项目根目录下创建 rollup.config.js 文件
input：指定入口文件
output：指定输入文件路径
yarn rollup --config
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife' // 指定输出格式
}
}
Rollup 使用插件
rollup 自身的功能只是 ESM 的合并打包
如果项目需要：
加载其他类型资源模块
代码中导入 CommonJS 模块
编译 ECMAScript 新特性
对于这些需求，Rollup 支持使用插件的方式扩展
并且，插件是 Rollup 唯一扩展途径
导入json插件： yarn add rollup-plugin-json --dev
json文件中 被使用的数据会被打包，没有使用的数据会 Tree Shaking
import json from 'rollup-plugin-json'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
json() // plugins 里放入的是 函数执行后的结果，而不是函数
]
}
Rollup 加载 NPM 模块
rollup 默认只能使用路径方式加载文件模块
rollup-plugin-node-resolve 插件使得 代码中可以直接使用模块名称 导入模块
yarn add rollup-plugin-node-resolve --dev
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()
]
}
Rollup 加载 CommonJS 模块
Rollup 默认只处理 ES Module 模块的打包
如果代码中 需要导入 CommonJS 模块，默认是不被支持，需要使用插件 rollup-plugin-commonjs
yarn add rollup-plugin-commonjs --dev
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
json(),
resolve(),
commonjs()
]
}
Rollup 代码拆分
代码中使用 动态导入，rollup 会自动实现 代码拆分
index.js
// // 导入模块成员
// import { log } from './logger'
// import messages from './messages'
// // 使用模块成员
// const msg = messages.hi
// log(msg)
import('./logger').then(({ log }) => {
log('code splitting~')
})
rollup.config.js
export default {
input: 'src/index.js',
output: {
// file: 'dist/bundle.js',
// format: 'iife'
dir: 'dist', // 代码拆分需要输出多个文件，所以必须指定 目录
format: 'amd' // iife 自执行函数无法实现代码拆分，需要使用 amd 标准
}
}
Rollup 多入口打包
对于不同入口公共使用部分会自动提取到单个文件中
export default {
// input: ['src/index.js', 'src/album.js'],
input: {
foo: 'src/index.js',
bar: 'src/album.js'
},
output: {
dir: 'dist',
format: 'amd'
}
}
因为使用了 amd 格式，所以如果 html 引用 rollup 打包后的 js文件，必须引用 支持 amd 的依赖，如：require.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- AMD 标准格式的输出 bundle 不能直接引用 -->
<!-- <script src="foo.js"></script> -->
<!-- 需要 Require.js 这样的库 -->
<script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
</body>
</html>
1
以上是关于Part2-2-3 Rollup的主要内容，如果未能解决你的问题，请参考以下文章
冗余代码都走开——前端模块打包利器 Rollup.js 入门