Rollup构建React组件库时assets资源路径引用错误如何解决？

解决步骤 #

1. 安装依赖 #

先安装Rollup静态资源处理和文件复制插件：

npm install rollup-plugin-copy @rollup/plugin-url --save-dev

2. 修改rollup.config.js配置 #

在原有配置的plugins数组中添加以下配置，原有其他插件保留即可：

import copy from 'rollup-plugin-copy';
import url from '@rollup/plugin-url';

export default {
  // 原有input、output等配置保持不变
  plugins: [
    // 原有babel、resolve、commonjs等插件保留
    url({
      limit: 8192,
      publicPath: './assets/',
      fileName: '[name][extname]'
    }),
    copy({
      targets: [
        { src: 'src/assets/*', dest: 'build/assets' }
      ],
      hook: 'buildStart'
    })
    // 原有terser、postcss等插件保留
  ]
}

3. 确认组件内导入写法 #

组件内导入静态资源时保持相对路径写法即可，例如：

import addIcon from '../assets/add.svg';

不需要修改导入路径，Rollup构建时会自动替换为适配构建目录的正确路径。

4. 重新构建组件库 #

执行构建命令后，build目录会生成对应的assets子目录，构建产物内的资源导入路径会自动修正为./assets/xxx的格式，导入到业务项目中即可正常使用。

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