React/Next.js+TypeScript如何实现组件短路径导入？

Next.js + TypeScript 实现方式 #

Next.js 内置支持绝对路径与别名导入，只需修改项目根目录的 tsconfig.json：

1. 编辑 tsconfig.json，在 compilerOptions 中添加 baseUrl 和 paths：

{
  "compilerOptions": {
    "baseUrl": ".", // 将项目根目录设为基准路径
    "paths": {
      "@components/*": ["components/*"], // @components 别名映射到根目录下的 components 文件夹
      "@containers/*": ["containers/*"] // 可按需添加容器等其他文件夹的映射
    },
    // 保留原有配置...
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

2. 配置完成后，重启开发服务即可使用两种导入方式：

• 直接导入：import Button from 'components/Button'（基于 baseUrl 直接指向根目录下的 components）
• 别名导入：import Button from '@components/Button'（基于 paths 映射的别名）

普通 React + TypeScript（Create React App）实现方式 #

Create React App 默认不支持自定义路径别名，需借助 craco 扩展配置：

1. 安装依赖：

npm install @craco/craco @types/node --save-dev
# 或 yarn
yarn add @craco/craco @types/node --dev

2. 项目根目录创建 craco.config.js，配置 Webpack 别名：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@containers': path.resolve(__dirname, 'src/containers'),
    },
  },
};

3. 修改 tsconfig.json，让 TypeScript 识别路径：

{
  "compilerOptions": {
    "baseUrl": "src", // 将 src 文件夹设为基准路径，可直接导入 src 下的文件
    "paths": {
      "@components/*": ["components/*"],
      "@containers/*": ["containers/*"]
    },
    // 保留原有配置...
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

4. 修改 package.json 的启动脚本，替换为 craco：

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

5. 重启开发服务后，即可使用：

• 直接导入：import Button from 'components/Button'（基于 baseUrl: src 指向 src/components）
• 别名导入：import Header from '@containers/Header'

手动配置 Webpack 的 React + TypeScript 项目 #

若项目是手动配置 Webpack 的，直接修改 webpack.config.js 的 resolve 字段：

const path = require('path');

module.exports = {
  // 其他 Webpack 配置...
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      components: path.resolve(__dirname, 'src/components'), // 支持直接用 components/xxx 导入
      '@containers': path.resolve(__dirname, 'src/containers'),
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
};

同时按照上述方式修改 tsconfig.json 的 baseUrl 和 paths，确保 TypeScript 能正确识别路径，重启服务后即可使用。

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