记录一次使用rollup打包vue3组件库配置

const vue = require('rollup-plugin-vue');
const ts = require('@rollup/plugin-typescript');
const babel = require('@rollup/plugin-babel');
const postcss = require('rollup-plugin-postcss');
const commonjs = require('@rollup/plugin-commonjs');
const cssnano = require('cssnano');
// const { visualizer } = require('rollup-plugin-visualizer');
const extensions = ['.ts', '.js', '.tsx'];
const dirPath = 'dist/es';

module.exports = [
	{
		input: ['./src/index.ts', './src/business-components/index.ts'],
		output: [
			{
				dir: dirPath,
				format: 'es',
				preserveModules: true, // 保留模块结构
				preserveModulesRoot: 'src'
			}
		],
		plugins: [
			// ts => js
			ts({
				outDir: dirPath,
				declaration: true,
				declarationDir: dirPath
			}),

			// es6+ => low, 支持jsx（babel插件：@vue/babel-plugin-jsx）
			// babelHelpers: 'bundled':代表babel最佳实践
			babel({ babelHelpers: 'bundled', extensions }),

			// cjs => esm
			// rollup默认是不支持CommonJS模块，需要用这个插件转成esm
			commonjs({
				extensions
			}),

			// .vue 加载，并将template转换成render函数
			vue({
				css: true, // 解析样式
				compileTemplate: true // 模板编译
			}),

			// less => css
			postcss({
				// extract: 'style/index.css',
				plugins: [cssnano()]
			})
			// 打包分析
			// visualizer({
			// 	filename: 'report.html',
			// 	open: true,
			// 	gzipSize: true,
			// 	brotliSize: true
			// })
		],
		external: ['vue', '@simplex/simple-base', '@paas/paas-design-mobile', 'mathjs']
	}
];