简介
rollup
是和webpack
、 vite
齐名的一种打包工具。但webpack
和vite
更适合打包应用,rollup
偏向于打包类
、库
这样的工具项目。
支持多种格式(es
、umd
、cjs
等)打包。详细配置可以看rollup
官网
环境配置
全局安装rollup
pnpm i rollup -g
使用
rollup
也有很多配套的生态工具,我这里就不举例并安装了,大家可以去npm
上面看。
新建一个项目,并创建rollop.config.js
,并添加配置
rollop.config.js
// 配置typescript
import typescript from 'rollup-plugin-typescript2';
//
import clear from 'rollup-plugin-clear';
// 简化引入路径
import resolve from 'rollup-plugin-node-resolve';
// 将commonJs模块转编es5
import commonjs from 'rollup-plugin-commonjs';
// 编译代码
import babel from 'rollup-plugin-babel';
// 压缩代码
import { terser } from 'rollup-plugin-terser';
// 静态文件存放
import copy from 'rollup-plugin-copy';
export default {
// 入口文件
input: ['./src/index.ts'],
// 输出目录
output: [
{
dir: 'bin',//存放目录
format: "es", // es模块导出,支持按需加载
name: '',//名称
exports: "named", // 指定导出模式(自动、默认、命名、无)
preserveModules: true, // 保留模块结构
preserveModulesRoot: "src", // 将保留的模块放在根级别的此路径下
},
],
// 插件目录
plugins: [
// 会自动读取 文件tsconfig.json配置
typescript(),
// 打包存放前,需要清除的目录
clear({
targets: ['bin'],
}),
// 简化引入路径
/*
不配置:
export foo from './foo/index.js'
import bar from './bar/index.js'
配置:
export foo from './foo'
import bar from './bar'
*/
resolve(),
// 将commonJs模块转编es5
commonjs(),
// 编译代码
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
}),
// 压缩代码
terser(),
// 不打包的文件,直接copy放进我们指定的目录中
copy({
targets: [
{
src: './assets', //静态文件
dest: './bin/style/' //需要存放的目录
}
],
}),
],
/*
比如我们在自己的库中需要使用第三方库,例如jquery等,
又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。作用:排除不希望打包进项目的库
*/
external: [],
};
package.json 配置
这里我只例举出了相关的配置,可以根据实际位置进行修改
"main": "bin/index.ts",
"module": "bin/index.js",
"typings": "bin/index.d.ts",
"type": "module",
"scripts": {
"build": "rollup -c ./rollup.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
目录结构
打包完成后的目录结构
项目名
- bin
- foo
index.d.ts
index.js
- demo
index.d.ts
index.js
- index.d.ts
- index.js
- src
- foo
- index.ts
- demo
index.ts
- index.ts
总结
总的来说rollup
要比webpack
的配置要简单一些,体积要小一些,没有那么复杂的配置,另外说一下,rollup
本身就支持es module
,vite
也是基于rollup
的。