Búsqueda de sitios web

typescript - ¿Cómo agrupar fuentes con rollupjs?

Estoy intentando construir mi biblioteca de componentes con rollup, sin embargo no le gustan mis archivos de fuente.

[!] Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
src/fonts/dancing/Dancing_Script-400-vietnamese1.woff2 (1:4)
1: wOF2�"�Z?STAT*�8hello everyone.

He estado tratando de resolver este problema durante las últimas un par de horas y no pude encontrar mucha ayuda en mis búsquedas. Intenté usar el complemento de URL para resolverlo, pero estoy obteniendo otros errores con él:

[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.                             
Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.

aquí está mi configuración de rollup

import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import image from '@rollup/plugin-image'
import url from '@rollup/plugin-url'

const packageJson = require('./package.json')

export default {
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    image(),
    resolve(),
    commonjs(),
    typescript(),
    url({
      limit: 1024 * 10,
      include: ['**/*.woff', '**/*.woff2'],
      emitFile: true,
    }),
  ],
}

Puedo ejecutar la biblioteca de componentes en Storybook sin problema. ¿Alguien sabe cómo puedo hacer que esto se compile incluyendo de alguna manera los archivos de fuentes también?

Respuesta #1

No estoy seguro si esto es demasiado tarde, pero logré exportar archivos de fuentes usando el módulo rollup-plugin-copy.

Aquí está mi rollup.config.js

import typescript from "rollup-plugin-typescript2";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";
import image from "@rollup/plugin-image";
import copy from "rollup-plugin-copy";
import pkg from "./package.json";

// Override the base tsconfig.json during build
const overrides = {
    exclude: [
        "**/stories/**",
        "**/__tests__/**",
        "**/__mocks__/**",
        "**/util/**",
    ],
};

export default {
    input: "src/index.ts",
    output: [
        {
            file: pkg.main,
            format: "cjs",
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(), // Add the externals for me. [react, react-dom, styled-components]
        resolve(),
        commonjs(),
        typescript({
            useTsconfigDeclarationDir: true,
            tsconfig: "tsconfig.json",
            tsconfigOverride: overrides,
        }),
        copy({
            targets: [
                // Need to copy the files over for usage
                { src: "src/assets/font", dest: "dist/assets" },
            ],
        }),
        postcss({
            extract: true,
            modules: false,
            plugins: [require("postcss-import")],
        }),
        image(),
        json(),
        terser(),
    ],
};

Artículos relacionados