为何Vite未将components文件夹构建至dist目录？

我正在运行一个简单的React项目，使用Vite作为构建工具，但配置未将components文件夹构建至./dist目录，网上未找到可行的解决方案。相关文件信息如下：

文件目录 #

vite.config.js #

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  build: {
    lib: {
      entry: './src/index.ts',
      formats: ['cjs', 'es'],
    },
    rollupOptions: {
      input: {
        components: resolve(__dirname, './src/components/index.ts'),
      },
    },
    target: ['esnext'],
  },
  resolve: {
    alias: {
      '@namejs': resolve(__dirname, './src'),
    },
  },
  plugins: [
    react(),
  ],
});

package.json #

{
  "name": "@namejs/react",
  "version": "0.1.3",
  "author": "Jaysnel",
  "license": "MIT",
  "main": "dist/react.js",
  "module": "dist/react.js",
  "typings": "dist/index.d.ts",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2"
  },
  "scripts": {
    "start": "storybook dev -p 6006",
    "build": "vite build"
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/react.js",
      "require": "./dist/react.cjs"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:storybook/recommended"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "@rollup/plugin-typescript": "^11.1.3",
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-interactions": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.4.0",
    "@storybook/preset-create-react-app": "^7.4.0",
    "@storybook/react": "^7.4.0",
    "@storybook/react-webpack5": "^7.4.0",
    "@storybook/testing-library": "^0.2.0",
    "@vitejs/plugin-react": "^4.0.4",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "babel-plugin-named-exports-order": "^0.0.2",
    "eslint-plugin-storybook": "^0.6.13",
    "prop-types": "^15.8.1",
    "storybook": "^7.4.0",
    "vite": "^4.4.9",
    "webpack": "^5.88.2"
  }
}

src/index.ts #

export * from './components';

src/components/index.ts #

export * from './CardanoWallet'

核心原因 #

你当前使用Vite的库模式构建，rollupOptions.input配置会被lib.entry覆盖，所以这个配置是无效的。而src/index.ts已经导出了components下的内容，实际上CardanoWallet组件的代码已经被打包进dist/react.js和dist/react.cjs中了——并不是没构建，只是没有以单独文件夹的形式输出。

解决方案 #

根据你的需求选择对应的方案：

方案1：确认组件已被正确打包（无需修改配置）

直接通过以下方式引入组件即可，代码已经包含在现有dist产物中：

import { CardanoWallet } from '@namejs/react';

方案2：单独输出components相关打包文件

如果需要把components作为独立模块输出，按以下步骤修改：

1. 修改vite.config.js
   删除无效的rollupOptions.input，改为多入口库配置：

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts'; // 需要先安装：npm install vite-plugin-dts --save-dev

export default defineConfig({
  build: {
    lib: {
      // 设置多入口，区分根导出和components导出
      entry: {
        index: resolve(__dirname, './src/index.ts'),
        components: resolve(__dirname, './src/components/index.ts'),
      },
      formats: ['cjs', 'es'],
      // 自定义文件名，保留入口名称
      fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'cjs'}`,
    },
    target: ['esnext'],
  },
  resolve: {
    alias: {
      '@namejs': resolve(__dirname, './src'),
    },
  },
  plugins: [react(), dts({ rollupTypes: true })], // 自动生成类型声明
});

2. 更新package.json
   添加components的导出入口，同时修正主产物路径：

{
  // ...其他配置
  "main": "dist/index.cjs",
  "module": "dist/index.js",
  "typings": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./components": {
      "types": "./dist/components.d.ts",
      "import": "./dist/components.js",
      "require": "./dist/components.cjs"
    }
  },
  // ...其他配置
}

3. 验证效果
   执行npm run build后，dist目录会生成：

• index.js/index.cjs：根导出产物
• components.js/components.cjs：单独的components产物
• 对应的.d.ts类型文件

此时既可以通过根路径引入，也可以单独引入components：

// 方式1：根路径引入
import { CardanoWallet } from '@namejs/react';

// 方式2：单独引入components
import { CardanoWallet } from '@namejs/react/components';

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