如何阻止Vite React组件库构建Storybook时生成d.ts文件？

以下是两种可行的解决方法，按需选择即可：

方案一：根据环境变量动态启用dts插件 #

Storybook启动时会自动设置STORYBOOK=true环境变量，我们可以利用这一点，仅在非Storybook环境加载dts插件：

修改你的vite.config.ts：

import { defineConfig } from "vite"
import { resolve } from "path"
import dts from "vite-plugin-dts"
import { viteStaticCopy } from "vite-plugin-static-copy"

export default defineConfig(() => {
  const isStorybook = process.env.STORYBOOK === "true";
  
  const plugins = [
    viteStaticCopy({
      targets: [
        { src: resolve(__dirname, "src/static"), dest: "./" },
        { src: resolve(__dirname, "./README.md"), dest: "./" },
        { src: resolve(__dirname, "./package.json"), dest: "./" },
      ],
    }),
  ];

  // 仅在组件库构建时启用dts插件
  if (!isStorybook) {
    plugins.push(dts({ insertTypesEntry: true }));
  }

  return {
    publicDir: false,
    build: {
      lib: {
        entry: resolve(__dirname, "src/index.ts"),
        name: "kb-lib",
        fileName: "index",
      },
      rollupOptions: {
        external: ["react"],
        output: {
          globals: { react: "React" },
          assetFileNames: "static/styles/components.css",
        },
      },
    },
    plugins,
  };
})

方案二：在Storybook配置中移除dts插件 #

如果环境变量判断不生效，可直接在Storybook的Vite最终配置中剔除dts插件：

修改或创建.storybook/main.ts：

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  async viteFinal(config) {
    if (config.plugins) {
      // 过滤掉dts插件
      config.plugins = config.plugins.filter(
        plugin => plugin.name !== "vite-plugin-dts"
      );
    }
    return config;
  },
};

export default config;

内容的提问来源于stack exchange，提问作者sebazelonka