返回

组件库 Rollup打包部署到私服的坑和解决方案

前端

Rollup打包React组件库

  1. 项目初始化

    • 安装Rollup：npm install rollup -D
    • 创建rollup.config.js：
    import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs',
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
  ],
};

  2. 打包

    • 运行rollup -c打包组件库

  3. 测试

    • 安装测试框架，如Jest：npm install jest -D
    • 编写测试用例
    • 运行测试：npm run test

  4. 发布

    • 创建npm私服：
      • 使用NPM提供的registry：npm install -g npm-registry
      • 启动私服：npm-registry start
    • 发布组件库：
      • 登录私服：npm login
      • 发布：npm publish --registry http://127.0.0.1:4873

可能遇到的坑和解决方案

  1. 打包后组件库无法正常使用

    • 确保已正确安装组件库依赖项
    • 检查rollup.config.js配置是否正确
    • 尝试使用不同的打包格式，如ESM或UMD

  2. 私服无法访问

    • 确保私服已启动
    • 检查私服地址和端口是否正确
    • 确保防火墙允许访问私服

  3. 发布组件库时遇到错误

    • 确保已登录私服
    • 检查组件库的package.json文件是否正确
    • 尝试使用不同的发布命令，如npm publish --force

  4. 组件库无法在其他项目中使用

    • 确保已将组件库添加到项目中
    • 检查组件库的路径是否正确
    • 确保组件库已发布到私服

  5. 组件库在其他项目中使用时出现问题

    • 检查组件库的依赖项是否已正确安装
    • 检查组件库的使用方式是否正确
    • 尝试更新组件库版本

扩展阅读