在npm包中包含来自汇总捆绑的reactjs-lib的资产字体

Question

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

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和esm添加类似的内容：

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