React.js项目如何通过package.json简化组件/资源导入路径？

React Native里靠在资源文件夹添加package.json的方式在Web React项目不生效，因为Web项目的模块解析规则由构建工具（如Webpack、Vite）控制，以下是两种主流构建工具的配置方案：

Create React App（CRA）项目配置 #

• 安装依赖：

  npm install @craco/craco --save-dev
  

• 在项目根目录创建craco.config.js，写入别名配置：

  const path = require('path');
  
  module.exports = {
    webpack: {
      alias: {
        '@resource': path.resolve(__dirname, 'src/resource') // 替换为你的资源文件夹实际路径
      }
    }
  };
  

• 修改package.json的启动脚本，替换react-scripts为craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

• 重启项目后，即可使用import Resource from '@resource/file-name'导入资源。

Vite构建的React项目配置 #

• 在项目根目录的vite.config.js中添加别名配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import path from 'path';
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@resource': path.resolve(__dirname, 'src/resource') // 替换为实际路径
      }
    }
  });
  

• 重启开发服务器后即可生效。

可选：TypeScript项目额外配置 #

如果使用TypeScript，需在tsconfig.json中添加paths配置，让编辑器正确识别别名：

{
  "compilerOptions": {
    // 其他原有配置...
    "baseUrl": "src",
    "paths": {
      "@resource/*": ["resource/*"]
    }
  }
}

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