日记

行也成文 4/13/2020

# 日记 2020.10.16

# 怎么使用 `@` 符号代替项目的 `src` 目录，用以避免类似 `../../../../` 的多重相对路径导入

Step 1: 弹出 react 项目配置

create-react-app 默认是将配置文件隐藏起来的，现在首先需要弹出 react 的配置文件。

npm run eject
# or
yarn run eject

1
2
3

参考：

react-scripts-eject (opens new window)

Step 2: 编辑 webpack 配置

编辑 config/webpack.config.js

// ...

resolve {
    // 在 alias 下进行配置 more configuration
    alias: {
        // ...
        // paths.appSrc 就是 src 目录的路径
        '@': paths.appSrc
    }
}

// ...

1
2
3
4
5
6
7
8
9
10
11
12

Step 3: 替换相对路径引用

现在可以将代码中的相对路径引用改成绝对路径引用。例如：

// src/index.tsx 中
import App from "./pages/App";
// =>
import App from "@/pages/App";

1
2
3
4

Step 4: 解决 ts 找不到类型定义的报错

完成以上步骤后，重新启动开发服务器还会遇到问题。

TypeScript error in <path/to/project>/src/index.tsx(7,17):
Cannot find module '@/pages/App' or its corresponding type declarations.  TS2307

     5 | import store from "./store/store";
     6 |
  >  7 | import App from "@/pages/App";
       |                 ^

1
2
3
4
5
6
7

这是因为项目是用 Typescript 开发的，webpack 能够解析 @ 符号的路径替换了，但是 tsc 不能解析。所以会报出找不到类型定义的错误。

解决方式：

编辑 tsconfig.json

{
  "compilerOptions": {
        // 在 compilerOptions 内添加如下配置
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11

重新启动开发服务器后，发现能够运行了。

参考：

Step 5: 解决 eslint 找不到模块的报错

在 vscode 里进行编辑时，依然会看到“无法解析指定模块”的错误提示。这是因为，webpack 和 tsc 都能识别解析 “@” 符号了，但是 eslint 还不知道怎么解析。

解决方案如下：

# 其实还需要用到 eslint-plugin-import 的，但是 react 已经默认安装了，就不再另外安装了，如果发现 package.json 中没有，再另外安装
npm install eslint-import-resolver-webpack --save-dev
# or
yarn add eslint-import-resolver-webpack --dev

1
2
3
4

create-react-app 默认是将 eslint 配置写到了 package.json 里。所以成功后，需要编辑 package.json 中的 eslintConfig 属性（如果发现 eslint 配置不是在这里，那就写到对应的位置，配置的格式不一样，但内容都是一样的）：

{
  "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "import"
    ],
    "settings": {
      "webpack": "./config/webpack.config.js",
      "import/resolver": {
        "alias": {
          "@": "src"
        }
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

具体要指导为什么这么配置的话，参考：

OK！

行也成文

日记

日记

# 日记 2020.10.16

# 怎么使用 @ 符号代替项目的 src 目录，用以避免类似 ../../../../ 的多重相对路径导入

# 怎么使用 `@` 符号代替项目的 `src` 目录，用以避免类似 `../../../../` 的多重相对路径导入