组件库构建:Rollup 配置最佳实践
使用 Rollup 构建组件库时如何配置?如何处理 JSX、TypeScript、CSS Modules、图片资源?如何输出 ES Module 和 CommonJS 双格式?如何配置 external 和 globals?
回答
编译有声
output: [{file:'dist/index.esm.js', format:'es'},{file:'dist/index.cjs.js', format:'cjs'}]。external: ['react','react-dom'] 不打包进组件。globals: {react:'React', 'react-dom':'ReactDOM'}。插件: @rollup/plugin-typescript(TS)、rollup-plugin-postcss(CSS Modules)、@rollup/plugin-url(图片)。Tree-shaking: ES 输出 + sideEffects:false。TypeScript 声明: tsc --emitDeclarationOnly 或 rollup-plugin-dts 单独输出。