嘿，作为刚接触Web开发的React新手，我太懂你被一堆../../绕得头大的感觉了！在Create React App（CRA）里配置根目录起始的导入别名其实很简单，下面给你两种实用方案，按需选择就行：

方案一：用Craco修改Webpack配置（通用所有CRA项目） #

CRA默认不让直接修改Webpack配置，而Craco是官方认可的第三方工具，可以帮我们轻松扩展配置：

1. 安装Craco
   打开终端，运行：

# npm
npm install @craco/craco --save-dev

# 或者 yarn
yarn add @craco/craco --dev

2. 创建Craco配置文件
   在项目根目录新建craco.config.js，写入以下内容：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      // 直接映射container目录到src/container，满足你的需求
      'container': path.resolve(__dirname, 'src/container/')
      // 如果你想把整个src设为根路径，也可以加一行：'@': path.resolve(__dirname, 'src/')
    }
  }
};

3. 修改package.json的脚本命令
   把原来的react-scripts替换成craco，比如：

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

4. 重启开发服务器
   关掉当前的dev服务，重新运行npm start或yarn start，之后就能直接用import Component from 'container/etc'导入啦！

方案二：用jsconfig.json/tsconfig.json配置（无需额外依赖） #

如果你的项目是纯JS项目，或者用了TypeScript，可以直接通过配置文件实现别名，还能获得编辑器的智能提示：

纯JavaScript项目 #

在根目录新建jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "src", // 把src设为基础路径
    "paths": {
      "container/*": ["container/*"] // 映射container开头的路径到src/container下
    }
  },
  "include": ["src"] // 指定要包含的目录
}

TypeScript项目 #

修改项目根目录的tsconfig.json，在compilerOptions里添加配置：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "container/*": ["container/*"]
    },
    // 保留你原来的其他配置...
  }
}

保存配置后，重启编辑器（比如VS Code），就能直接使用import Component from 'container/etc'，而且编辑器会自动补全路径哦！

额外提示：解决ESLint报错（如果有的话） #

如果你的项目用了ESLint，可能会出现“无法解析模块路径”的报错，这时候可以安装eslint-import-resolver-alias来解决：

1. 安装依赖：

npm install eslint-import-resolver-alias --save-dev
# 或 yarn add eslint-import-resolver-alias --dev

2. 修改.eslintrc（或.eslintrc.json）：

"settings": {
  "import/resolver": {
    "alias": {
      "map": [
        ["container", "./src/container"]
      ],
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  }
}

这样ESLint就会识别你的别名路径啦！

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