如何将UI库封装为自有npm包？自定义element-ui封装发布求助

问题原因排查 #

你发布后仅存在package.json的问题和构建工具无关，优先检查两个配置：

• 确认.npmignore或.gitignore没有排除你配置的src/assets目录，npm发布时.npmignore优先级高于.gitignore，如果两个文件中存在src这类全局排除规则，即使配置了files字段也会过滤对应目录
• 你当前的"files": ["src/assets/*.scss"]仅能匹配src/assets下直接存放的scss文件，如果样式文件存放在子目录中就无法命中，建议调整为递归匹配规则"src/assets/**/*.scss"，同时把构建后的组件产物目录（比如dist）也加入files配置，完整示例如下：

"files": [
  "dist",
  "src/assets/**/*.scss"
]

每次发布前可以本地执行npm pack命令，生成的tgz压缩包就是最终发布到npm的内容，提前检查文件完整性避免白发布。

Rollup适配性说明 #

Rollup确实比Webpack更适合组件库打包场景，核心优势如下：

• Rollup天生为类库打包设计，默认输出的产物无冗余运行时代码，包体积远小于Webpack的构建结果，更适合被第三方项目依赖引用
• 支持多入口配置，可以轻松实现单个组件单独打包，配合package.json的exports字段配置，就能直接实现custom-lib/button这类子路径引入的需求
• 样式处理更灵活，通过rollup-plugin-scss、rollup-plugin-copy等插件，可以很方便的把scss源文件、编译后的css文件输出到指定目录，满足custom-lib/style/button.scss这类样式直接引入的需求
• 支持同时输出ES Module、CommonJS、UMD等多格式产物，适配不同项目的引入规范

如果你不想完全重构构建配置，也可以选择Vite的库模式，底层基于Rollup实现，配置成本更低，也能完全满足你的需求。

内容的提问来源于stack exchange，提问作者the_zhorov