如何将字体与rollupjs捆绑？

Question

我试图用rollup构建组件库，但是它不喜欢我的字体文件。

[!] 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.

在过去的几个小时里，我一直试图解决这个问题，但在我的搜索中找不到多少帮助。我尝试使用url插件来解决这个问题，但是我发现了其他错误：

[!] 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.

这是我的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,
    }),
  ],
}

我可以在故事书中运行组件库，没有问题。有谁知道我如何通过打包字体文件来构建这个文件呢？

Answer 1

不确定这是否太晚，但我设法获得了使用rollup-plugin-copy模块导出的字体文件。

这是我的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(),
    ],
};