rullup打造工具库
# 常用插件
# 1.rollup-plugin-dts
自动帮你生成类型声明文件
*.d.ts
import dts from "rollup-plugin-dts";
const config = [
// …
{
input: "./my-input/index.d.ts",
output: [{ file: "dist/my-library.d.ts", format: "es" }],
plugins: [dts()],
},
];
export default config;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 2.@rollup/plugin-commonjs
rollup本身是不支持CommonJS的，使用了这个插件，就可以解析CommonJS模块了.
如果在一个配置内同时使用了@rollup/plugin-babel，需要把@rollup/plugin-commonjs 插件放在前面使用
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
const config = {
...
plugins: [
commonjs(),
babel({ babelHelpers: 'bundled' })
],
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3.rollup-plugin-terser
对代码进行压缩
import { terser } from 'rollup-plugin-terser';
{
output: [
{
file: (`./dist/index.min.js`),
format: 'umd',
name: 'atools',
sourcemap: true,
plugins: [terser()],
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 4.@rollup/plugin-node-resolve
启用了该插件，让rollup可以找到node环境的其他依赖.
优点
- rollup就可以解析第三方模块了，如
import dayjs from 'dayjs'直接解析到node_moduls,不使用该插件就要显示的指定包的位置，这样就简化了导入的过程。 - 自动识别index
// 不配置 @rollup/plugin-node-resolve 插件引入方式
export foo from './foo/index.js'
import bar from './bar/index.js'
// 配置了 @rollup/plugin-node-resolve 插件引入方式
export foo from './foo'
import bar from './bar'
1
2
3
4
5
6
7
2
3
4
5
6
7
配置
默认只对['.js', '.json']文件起效，如果项目使用了ts，要改为['.ts','.js', '.json']
import { nodeResolve } from '@rollup/plugin-node-resolve';
{
input: './index.ts',
output: [],
plugins: [
nodeResolve({
extensions:['.ts', '.js', '.json'],
})
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 5. rollup-plugin-babel
将代码转换为es5
import babel from 'rollup-plugin-babel';
{
input: './index.ts',
output: [],
plugins: [
babel({
extensions:['.ts', '.js'],
exclude: 'node_modules/**' // 这个目录下排除在外，不做处理
})
]
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 注意
- rollup-plugin与rollup/plugin区别（如
rollup-plugin-typescript2与@rollup/plugin-typescript）- rollup-plugin开头是社区提供的插件
- rollup/plugin是官方提供的插件
# 参考
编辑 (opens new window)
上次更新: 2023/02/02