Rollup样式方案 | 实测有效

▌ 技术引导

我见过很多项目里使用 Rollup 的时候，因为没有正确配置插件或输出格式，最终导致构建失败或打包体积爆炸，甚至在部署时出现兼容性问题。最近一个真实项目中，我用 Rollup 搭配 esbuild 和 typescript，把微前端框架打包成可复用的模块，结果发现很多关键点没搞清楚，比如如何处理动态导入，如何设置环境变量，以及如何优化树摇效果。实际上，rollup 本身不是万能，但配合一些现代工具链，可以达到媲美 webpack 的打包效果。我直接上真东西：在配置文件中设置 output.format 为 'esm'，同时配置 treeshaking 为 true，加上 resolve.alias 指定路径别名，构建时自动识别并剔除未使用的代码。这招在实际代码中救过几次命，尤其是当项目体积过大，性能卡顿时。

我还在一个项目中踩过因为没配置 plugin 的副作用，导致打包后的代码在浏览器中运行异常。比如使用 rollup-plugin-typescript2 时，如果不配置 tsconfig，它会默认使用全局 tsconfig 文件，但有时项目结构复杂，多环境配置会导致解析错误。关键点在于，要手动指定 tsconfig 的路径，例如：tsconfig: { path: './tsconfig.build.json' }。此外，使用 rollup-plugin-node-resolve 配合 rollup-plugin-commonjs 时，要避免在 package.json 中出现不兼容的模块声明，否则会打包失败。这些细节必须在配置阶段明确，否则后期调试会非常费力。

如果项目引入了第三方库，比如 react 或 vue，必须注意 rollup 的打包方式。react 通常不会打包成 iife，所以配置 output.format 为 'umd' 时，需要提前在构建命令中指定 name。比如：name: 'React'，这样打包出来的文件才能在全局作用域中正确运行。还有就是，rollup 在处理 css 时不能直接依赖 postcss，必须用 rollup-plugin-postcss，否则会报错。配置时记得加上 output.manualChunks 并设置为 true，避免将 css 打包进 js 中。

在实际部署中，我发现 rollup 的默认配置不适合多环境部署，尤其是开发环境和生产环境的构建差异很大。比如，在开发环境中，需要启用 source maps 和热更新，而生产环境则要开启 minify 和 tree shaking。配置文件中需要通过 env 变量来判断环境，比如 process.env.NODE_ENV === 'production'，然后根据这个值调整 output.format、plugins 配置等。这个方法已经用在多个项目中，效率提升明显。

还有一个很关键的点，就是如何避免打包时引入不必要的依赖。有时候项目中会因为误用 import as 语句，导致整个库被打包进去。解决方案是结合 rollup-plugin-terser 或 rollup-plugin-uglify，配合 output.manualChunks，将依赖拆分成单独的 chunk。另外，useBuiltIns 策略在处理浏览器兼容性时也很重要，比如在 rollup-plugin-babel 中配置 targets，这样打包出来的代码就能自动兼容 es5。这些配置细节都是从实际项目中总结出来的，不能瞎折腾。

▌ 技术参考

一 rollup 的核心配置文件 rollup.config.js 是打包流程的灵魂，必须精准控制各个插件的参数。例如，使用 rollup-plugin-typescript2 需要指定 tsconfig 的路径，这样能避免打包时出现 typescript 解析错误。在配置文件中添加：import typescript from 'rollup-plugin-typescript2'; export default { plugins: [typescript({ tsconfig: './tsconfig.build.json' })] }，这样会自动读取 build 配置。此外，如果项目使用了 commonjs 模块，必须配合 rollup-plugin-commonjs，否则会报错。插件配置上，切记不要把所有插件都堆在一起，要根据实际需求选择，否则会影响打包效率。

二 在 rollup 中，output 配置是决定打包输出方式的关键。常见的 format 有 esm、cjs、umd、iife 等，根据项目打包目标选择。比如，打包一个用于浏览器的库，推荐使用 umd 格式，这样既可以在浏览器中运行，也能被其他模块导入。配置样例：output: { format: 'umd', name: 'MyLibrary', file: 'dist/mylibrary.js' }。name 参数必须指定，否则打包后的文件不能在全局作用域中使用。同时，使用 output.manualChunks 参数可以控制拆包策略，比如将第三方库单独打包，避免影响主文件体积。

三 rollup 的 tree shaking 功能在某些场景下表现不佳，尤其是当使用了动态导入或某些特定语法时，容易导致未使用的代码被错误保留。这时候需要结合 rollup-plugin-terser 或 rollup-plugin-uglify 来进一步压缩和优化代码。例如，在 build 命令中加入 --flag 参数，或者在 rollup.config.js 中开启 minimize 选项。另外，使用 rollup-plugin-terser 时，需要确保配置正确，比如设置 compress.level 为 9，并且关闭 drop_console 以避免代码被错误精简。

四 在处理 css 文件时，必须使用 rollup-plugin-postcss，不能直接依赖 postcss。配置方式是引入插件并设置 options：import postcss from 'rollup-plugin-postcss'; export default { plugins: [postcss({ extract: true, use: [require('autoprefixer')] })] }。这里的关键是 extract 参数，如果设为 true，则会将 css 提取成单独文件，否则会打包进 js 中。这个配置在微前端或组件库项目中特别重要，否则会导致体积过大。同时，确保在项目中正确安装了 postcss 和 autoprefixer，否则会报错。

五 rollup 的构建流程在多环境部署中容易出错，尤其是在开发环境和生产环境的配置差异上。比如，生产环境需要开启 minify 和 tree shaking，而开发环境则需要保留源码并启用 source maps。可以通过环境变量来控制这个行为，比如在 rollup.config.js 中加入：import { defineConfig } from 'rollup'; export default defineConfig({ plugins: [typescript({ tsconfig: './tsconfig.build.json' }), postcss(), ...(process.env.NODE_ENV === 'production' ? [uglify()] : []) ] });。这样能保证不同环境的构建结果一致，同时避免不必要的性能损耗。

六 rollup 在处理第三方库时，可能会因为模块声明问题导致打包失败。比如，某些库在 package.json 中声明了 module 字段，但没有正确设置 typescript 的解析路径，这时候需要通过 rollup-plugin-node-resolve 来指定正确的解析策略。配置样例：import resolve from '@rollup/plugin-node-resolve'; export default { plugins: [resolve({ browser: true })] }。这个配置能确保 rollup 正确解析和打包第三方库，避免因模块不符导致的错误。同时，如果项目中使用了模块别名，一定要配置 resolve.alias，否则会找不到模块。

七 rollup 的打包方式与 webpack 有很大不同，尤其在处理动态导入和异步加载时，需要特别注意。比如，使用 rollup 的 import() 语法时，必须确保 rollup-plugin-commonjs 被正确配置，否则会报错。在配置文件中，可以这样设置：import commonjs from '@rollup/plugin-commonjs'; export default { plugins: [commonjs(), ...] }。此外，如果项目中存在大量异步 import，建议启用 rollup-plugin-terser 或 rollup-plugin-uglify 来优化代码，减少冗余。

八 rollup 的 source maps 在开发阶段非常重要，能帮助开发者快速定位错误。如果在构建时没有启用 source maps，调试会变得异常困难。配置方法是：在 rollup.config.js 中设置 output.sourcemap 为 true，或者在构建命令中添加 --sourcemap 参数。但需要注意的是，在生产环境中，source maps 会增加打包体积和暴露源码风险，所以要根据环境变量动态控制。例如：output: { sourcemap: process.env.NODE_ENV === 'production' ? false : true }。这个策略能保证在开发阶段可以使用 source maps，生产阶段则关闭。

九 rollup 的打包过程如果涉及大量文件，容易出现性能问题。比如，在处理大型代码库时，如果没有正确配置 output.manualChunks，会将所有代码打包成一个文件，导致加载时间过长。这时候需要结合 rollup-plugin-terser 来控制代码压缩，或者使用 rollup-plugin-visualizer 来分析打包结果。配置样例：import visualizer from 'rollup-plugin-visualizer'; export default { plugins: [visualizer({ filename: 'dist/analysis.html', open: true })] }。这个插件能生成一个可视化图表，展示打包后的依赖关系和体积分布，对优化非常有帮助。

十 rollup 的构建流程在某些情况下会出现兼容性问题，尤其是在使用 esm 格式时，需要确保目标环境支持。比如，如果项目部署在不支持 esm 的浏览器或服务器上，必须将 format 改为 umd 或 iife。这时候可以通过使用 rollup-plugin-babel 来转换代码，例如：import babel from 'rollup-plugin-babel'; export default { plugins: [babel({ presets: ['@babel/preset-env'] })] }。这个配置能确保打包后的代码兼容各种环境，避免因语法问题导致的运行错误。

十一 rollup 在处理 typescript 项目时，如果类型文件没有被正确排除，会导致打包体积异常庞大。这时候需要在 rollup.config.js 中设置 exclude 参数，或者在 tsconfig.json 中配置 exclude 字段。例如：import typescript from 'rollup-plugin-typescript2'; export default { plugins: [typescript({ exclude: ['/.d.ts'] })] }。这样可以确保打包时不会包含类型声明文件，减少不必要的体积。此外，也可以在构建命令中加入 --exclude 参数，或者使用 rollup-plugin-terser 来删除注释和空格。

十二 rollup 的插件生态非常丰富，但并不是所有插件都适合你的项目。比如，rollup-plugin-node-resolve 和 rollup-plugin-commonjs 是处理第三方库的必备插件，而 rollup-plugin-postcss 则是处理 css 的关键。在使用插件时，需要根据项目需求选择，比如如果项目没有使用 css，可以忽略 postcss 插件。另外，像 rollup-plugin-uglify 和 rollup-plugin-terser 这类优化插件，建议在生产环境使用，否则会影响开发效率。

十三 rollup 的构建命令可以结合环境变量来控制，比如在 package.json 中配置："build": "rollup -c --environment MODE:production"。这样能通过环境变量动态调整配置文件中的参数，比如是否开启 tree shaking、是否启用 source maps 等。在 rollup.config.js 中，可以通过 process.env.MODE 来判断环境，例如：if (process.env.MODE === 'production') { output: { format: 'umd', name: 'MyLibrary', sourcemap: false } }。这种配置方式能确保构建命令的灵活性和可控性。

十四 rollup 在处理依赖时，如果某些模块没有正确声明，会导致打包失败。比如，如果一个模块没有定义 module 字段或者没有声明 exports，rollup 可能会误判其为 commonjs 模块。这时候需要使用 rollup-plugin-node-resolve 来正确解析这些模块，或者手动配置 resolve.extensions。例如：import resolve from '@rollup/plugin-node-resolve'; export default { plugins: [resolve({ extensions: ['.js', '.ts', '.tsx'] })] }。这样能确保 rollup 能正确识别和打包各种模块类型。

十五 rollup 的打包结果如果直接用于浏览器，需要确保文件格式兼容，否则会出现加载失败问题。比如，如果使用了 esm 格式，那么在浏览器中一定要通过 type=module 的方式引入。有时候开发人员会误以为打包后的文件可以直接使用，结果导致运行时错误。这时候需要在构建时确保 output.format 设置为 umd 或 iife，并且在使用时正确引入。如果项目使用了 micro frontends，建议使用 rollup 的 output.manualChunks 来拆分依赖，提升加载速度。