1 安装
1.1 针对 JavaScript
pnpm add -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel rollup-plugin-postcss @rollup/plugin-terser
1.2 针对 TypeScript
在 JavaScript 基础上添加一些插件：
pnpm add -D rollup-plugin-typescript2
1.3 支持 Vue
pnpm add -D rollup-plugin-vue
1.4 其他插件
pnpm add -D @rollup/plugin-json rollup-plugin-copy
2 配置
在项目根目录下创建 rollup.config.js 文件。
2.1 针对 JavaScript
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-underscore-dangle */// 告诉 Rollup 如何查找外部模块
import resolve from '@rollup/plugin-node-resolve';
// 将 CommonJS 转换成 ES 模块
import commonjs from '@rollup/plugin-commonjs';
// 读取 Babel 配置
import { getBabelOutputPlugin } from '@rollup/plugin-babel';
// 压缩发布的js代码
import terser from '@rollup/plugin-terser';
// 处理 CSS 文件，将 CSS 文件放在js中
import postcss from 'rollup-plugin-postcss';
import path from 'path';
import { fileURLToPath } from 'url';const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);export default {// 插件plugins: [commonjs(),resolve(),postcss({// 与ts同级同名 | 自定义文件名称、路径extract: true,}),getBabelOutputPlugin({allowAllFormats: true,configFile: path.resolve(__dirname, 'babel.config.json'),}),terser({compress:{drop_console: true,pure_funcs: ['console.log'], // 删除console.log},}),],input: 'src/index.js',output: [{format: 'esm',file: 'dist/mylibrary.esm.js',},{name: 'MyLibrary',format: 'umd',file: 'dist/mylibrary.umd.js',},],
};
2.2 针对 TypeScript
在 JS 配置的基础上添加：
// 支持typescript
import typescript from 'rollup-plugin-typescript2'; // 加上这一行export default {// 插件plugins: [typescript2(), // 加上这一行getBabelOutputPlugin({...}),],
};
注意 tsconfig.json 一般为：
{"compilerOptions": {// 用来指定要使用的模板标准"module": "esnext",// 用于指定编译之后的版本"target": "esnext",// 用于选择模块解析策略，有"node"和"classic"两种类型"moduleResolution": "node",// 用于指定是否启动所有类型检查 严格模式"strict": true,// 用来指定是否允许编译JS文件"allowJs": true,// 用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载"typeRoots": ["./types","./node_modules/vue/types"],},// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）"include": ["components/**/*","./*.js","./*.ts","./*.cjs","types/shims-vue.d.ts"],"exclude": ["node_modules"]
}
2.3 支持 Vue
// 支持vue文件
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable no-underscore-dangle */
// 支持vue文件
import vue from 'rollup-plugin-vue';
// 告诉 Rollup 如何查找外部模块
import resolve from '@rollup/plugin-node-resolve';
// 将 CommonJS 转换成 ES 模块
import commonjs from '@rollup/plugin-commonjs';
// 读取 Babel 配置
import { getBabelOutputPlugin } from '@rollup/plugin-babel';
// 压缩发布的js代码
import terser from '@rollup/plugin-terser';
// 处理 CSS 文件，将 CSS 文件放在js中
import postcss from 'rollup-plugin-postcss';
import path from 'path';
import { fileURLToPath } from 'url';
import typescript2 from 'rollup-plugin-typescript2';const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);export default {// 插件plugins: [vue(),commonjs(),resolve(),postcss({// 与ts同级同名 | 自定义文件名称、路径extract: true,}),typescript2(),getBabelOutputPlugin({allowAllFormats: true,configFile: path.resolve(__dirname, 'babel.config.json'),}),terser({compress:{drop_console: true,pure_funcs: ['console.log'], // 删除console.log},}),],input: 'index.ts',output: [{format: 'esm',file: 'dist/mycomponents.esm.js',},{name: 'MyComponents',format: 'umd',file: 'dist/mycomponents.umd.js',},], // 指出应将哪些模块视为外部模块external: ['vue',],
};
)
