如何将字体与rollupjs捆绑在一起？

Question

我正在尝试使用汇总构建我的组件库，但是它不喜欢我的字体文件。

\n

[!] Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)\nsrc/fonts/dancing/Dancing_Script-400-vietnamese1.woff2 (1:4)\n1: wOF2\xef\xbf\xbd"\xef\xbf\xbdZ?STAT*\xef\xbf\xbd8hello everyone.\n

\n

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

\n

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

\n

这是我的汇总配置

\n

import peerDepsExternal from 'rollup-plugin-peer-deps-external'\nimport resolve from '@rollup/plugin-node-resolve'\nimport commonjs from '@rollup/plugin-commonjs'\nimport typescript from 'rollup-plugin-typescript2'\nimport image from '@rollup/plugin-image'\nimport url from '@rollup/plugin-url'\n\nconst packageJson = require('./package.json')\n\nexport default {\n  input: 'src/index.ts',\n  output: [\n    {\n      file: packageJson.main,\n      format: 'cjs',\n      sourcemap: true,\n    },\n    {\n      file: packageJson.module,\n      format: 'esm',\n      sourcemap: true,\n    },\n  ],\n  plugins: [\n    peerDepsExternal(),\n    image(),\n    resolve(),\n    commonjs(),\n    typescript(),\n    url({\n      limit: 1024 * 10,\n      include: ['**/*.woff', '**/*.woff2'],\n      emitFile: true,\n    }),\n  ],\n}\n

\n

我可以毫无问题地运行故事书中的组件库。有谁知道我如何通过某种方式打包字体文件来构建它？

\n

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