reactjs - Rollup - hvordan forhindre CSS-import fra d.ts-fil?

Jeg har en React- & Typescript/tailwind/postcss/Rollup-oppsett for å bygge et komponentbibliotek, på dette depotet.

Alt fungerer som forventet bortsett fra ett problem; en tilsvarende import for ../styles/index.css blir inkludert i den genererte dist/index.d.ts-filen. Jeg ønsker å ha deklarasjoner for komponentene mine, men ikke denne CSS-importen.

Problemet er at denne index.css-filen ligger utenfor dist-mappen, og ikke er inkludert i den endelige biblioteket. I stedet blir den minifiserte og rensede Tailwind CSS-filen generert og brukt.

Nåværende løsning

Jeg er for øyeblikket avhengig av en kommando etter bygging for å fjerne importen fra filen ved å bruke sed:

scripts: {
    ...
    "build": "rollup -c && cp dist.package.json dist/package.json",
    "fix": "sed '1d' ./dist/index.d.ts > ./tmp.d.ts; mv ./tmp.d.ts ./dist/index.d.ts",
}

Jeg føler ikke at dette er en optimal tilnærming. Hvis jeg kan forhindre importen i byggeprosessen i stedet, ville dette være å foretrekke.

Lignende problemer

Jeg fant dette problemet, men pseudokoden som er gitt fungerer ikke/er ikke fullstendig. Videre føles dette mer som en midlertidig løsning enn en reell fiksering.

rollup.config.js

For hva det er verdt, er min nåværende rollup-konfigurasjon som følger:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import del from "rollup-plugin-delete";
import simplevars from "postcss-simple-vars";
import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";

/**
 * @type {import('rollup').RollupOptions}
 */
export default {
  input: "lib/index.tsx",
  output: [
    {
      file: "dist/index.tsx",
      format: "es",
      sourcemap: false,
    },
  ],
  plugins: [
    del({ targets: "dist/*" }),
    peerDepsExternal(),
    postcss({
      config: {
        path: "./postcss.config.js",
      },
      plugins: [
        simplevars(),
        nested(),
        cssnext({ warnForDuplicates: false }),
        cssnano(),
      ],
      extensions: [".css"],
      minimize: true,
      modules: false,
      extract: "index.css",
    }),
    resolve(),
    typescript({
      useTsconfigDeclarationDir: true,
    }),
  ],
};

Svar #1

Hvis vi antar at dette var din konfigurasjon nedenfor, opprett en ny konfigurasjon (typesConfig) for dts, legg til nytt alternativ external og oppgi et regulært uttrykk.

const typesConfig = {
  input: "dist/index.d.ts",
  output: [{ file: "dist/types.d.ts", format: "esm", sourcemap: true }],
  // Create a new option external and provide a regexp
  external: [/\.css$/],   // ignore .css file
  plugins: [dts()],
};

export default [{
  input: "lib/index.tsx",
  output: [ ... ],
  plugins: [
    del({ targets: "dist/*" }),
    ...
    resolve(),
  ],
},
typesConfig
];

Jeg håper dette besvarer spørsmålet ditt.

Relaterte artikler