es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Incluye las fuentes de activos de las bibliotecas ReactJS empaquetadas en Rollup en el paquete npm.

Incluye las fuentes de activos de las bibliotecas ReactJS empaquetadas en Rollup en el paquete npm.

28 Jul, 2023 Programación

Estoy intentando empaquetar una biblioteca de ReactJS con Rollup para crear un paquete de npm con todos mis componentes de IU, pero estoy encontrando un problema con los iconos de fuente.
Cuando intento usar un icono de otra aplicación de React, recibo el siguiente mensaje de error:

Error al decodificar la fuente descargada: http://<my-url>/Flaticon.woff2

Parece que está buscando las fuentes dentro de la carpeta raíz de la nueva aplicación y no dentro del directorio node_modules/my-lib que efectivamente contiene los archivos de fuente.

Este es mi archivo de configuración de Rollup:


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',
},
]
})
]
};

Cualquier ayuda es muy apreciada.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está relacionado con la configuración incorrecta de la ruta a los archivos de fuente en el paquete. Dado que los archivos de fuente se encuentran en el directorio node_modules/my-lib, es necesario actualizar la ruta en el archivo de configuración de rollup para reflejar esto.

    Una solución es utilizar la opción relative en el complemento copy, que copia archivos desde un directorio especificado en relación a la raíz del proyecto. En este caso, podemos usar node_modules/my-lib/src/assets como directorio de origen para los archivos de fuente.

    Aquí tienes un archivo de configuración de rollup actualizado con los cambios:

    import path from 'path';
import copy from 'rollup-plugin-copy';

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({
      targets: [
        {
          src: path.join(__dirname, 'node_modules/my-lib/src/assets/**/*.+(woff|woff2|ttf)'),
          dest: 'build',
          relative: 'node_modules/my-lib/src/assets',
        },
      ],
    }),
  ],
};

    Esto debería copiar los archivos de fuente desde la ruta de origen correcta y permitir que se decodifiquen correctamente cuando se utilicen en la aplicación.

Comments are closed.