在 npm 包中包含来自 rollup 捆绑 reactjs 库的资产字体

Question

我正在尝试将 reactjs 库与 rollup 捆绑在一起，以创建一个包含我所有 UI 组件的 npm 包，但我发现字体图标存在问题。 当我尝试使用来自其他反应应用程序的图标时，我收到：

Failed to decode downloaded font: http://<my-url>/Flaticon.woff2

它似乎是在新应用程序的根文件夹中搜索字体，而不是在确实包含字体文件的 node_modules/my-lib 目录中。

这是我的汇总配置文件：

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
    },
    {
      file: packageJson.main,
      format: 'cjs',
      name: 'my-lib',
      exports: 'named',
      globals: { react: 'React' }
    }
  ],
  external: ['react', 'react-dom'],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss({
      inject: true,
      config: {
        path: './postcss.config.js',
      },
      sourceMap: true,
      extract: false,
    }),
    copy({
       {
          src: [
            'src/assets/icons/Flaticons/Flaticon.woff',
            'src/assets/icons/Flaticons/Flaticon.woff2',
            'src/assets/icons/Flaticons/Flaticon.ttf',
          ],
          dest: 'build',
        },
      ]
    })
  ]
};

非常感谢任何帮助。

Answer 1

尝试为 cjs amd esm 添加类似这样的内容：

copy({
        targets: [
          { src: 'src/assets/icons', dest: 'dist/esm/assets/icons' },
          { src: 'src/styles/fonts', dest: 'dist/cjs/assets/icons' },
        ],
      }),