如何配置Vite实现常用模块自动导入及React组件全局类型推断？

要让<Box>不用手动导入就能全局使用，且默认从@/platformStuff导入，同时尽量保留tree-shaking能力，你可以参考以下几种配置方式：

1. 使用Babel自动导入插件（推荐，支持按需导入） #

用babel-plugin-auto-import插件可以实现按需自动导入指定模块，不会把没用到的组件打包进去。

首先安装插件：

npm install babel-plugin-auto-import --save-dev

然后在你的Babel配置文件（比如babel.config.js）里添加如下配置：

module.exports = {
  plugins: [
    [
      'auto-import',
      {
        declarations: [
          {
            default: 'Box',
            path: '@/platformStuff',
          },
        ],
      },
    ],
  ],
};

这样Babel会在编译时自动给用到<Box>的文件加上import { Box } from '@/platformStuff'，没用到的文件不会加，自然也不会打包多余代码。

2. 处理TypeScript类型报错 #

如果你的项目用TypeScript，直接写<Box>会报“找不到名称'Box'”的错误，需要添加全局类型声明：

在项目根目录新建src/global.d.ts文件，写入：

import type { Box } from '@/platformStuff';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      Box: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & typeof Box;
    }
  }
}

或者更直接地把Box声明为全局变量：

import type { Box } from '@/platformStuff';

declare global {
  const Box: typeof Box;
}

记得在tsconfig.json里确保这个声明文件被包含：

{
  "include": ["src/**/*", "src/global.d.ts"]
}

3. 构建工具层面的自动导入（Vite/Webpack） #

Vite项目（用unplugin-auto-import） #

unplugin-auto-import支持Vite、Webpack等多种构建工具，按需导入且配置灵活。

安装插件：

npm install unplugin-auto-import --save-dev

在vite.config.ts里配置：

import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        {
          '@/platformStuff': ['Box'],
        },
      ],
      dts: true, // 自动生成类型声明文件，解决TS报错
    }),
  ],
});

开启dts后会自动生成auto-imports.d.ts，不用手动写类型声明，非常方便。

Webpack项目（用ProvidePlugin） #

Webpack的ProvidePlugin可以把模块作为全局变量注入，但要注意这个方式会强制把Box打包进产物，不管有没有用到，适合确实每个页面都用的组件：

在webpack.config.js里配置：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      Box: ['@/platformStuff', 'Box'],
    }),
  ],
};

这种方式不需要额外插件，但会失去tree-shaking能力，如果你能接受的话可以用。

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