如何在我的 Create React App Typescript Eslint 项目中使用 typescript 路径别名？

Question

我使用了这个模板项目 https://github.com/kristijorgji/cra-ts-storybook-styled-components并升级了一些库。

package.json

看起来像

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "homepage": "/",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006 -s public",
    "build-storybook": "storybook build -s public",
    "lint:eslint": "eslint --ext js,jsx,ts,tsx src",
    "lint:prettier": "prettier --check \"src/**/*.*\"",
    "lint": "yarn lint:eslint && yarn lint:prettier",
    "fix:eslint": "eslint --fix --ext js,jsx,ts,tsx src",
    "fix:prettier": "prettier --write './src/**/*.{ts,tsx,json,js}'",
    "fix": "yarn fix:eslint && yarn fix:prettier"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/lab": "^5.0.0-alpha.113",
    "@mui/material": "^5.11.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "react-scripts": "^5.0.1",
    "styled-components": "^5.2.1",
    "typescript": "^5.0.2",
    "web-vitals": "^3.4.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^7.4.0",
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/node-logger": "^7.4.0",
    "@storybook/preset-create-react-app": "^7.4.0",
    "@storybook/react": "^7.4.0",
    "@storybook/react-webpack5": "^7.4.0",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.5",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.12.7",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.4",
    "eslint": "^8.48.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-storybook": "^0.6.13",
    "prettier": "^3.0.3",
    "storybook": "^7.4.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我想使用打字稿路径别名并执行以下步骤：

1. 我将

   tsconfig.json

   更改为有

    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }

完整

tsconfig.json

：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "noImplicitAny": false,
    "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",
    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }
  },
  "include": [
    "src"
  ]
}

2. 纱线添加-D eslint-import-resolver-typescript
3. 我修改了

   .eslint.js

   为解析器添加了

   settings

module.exports = {
    extends: [
        'react-app',
        'react-app/jest',
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:import/typescript',
        'plugin:prettier/recommended',
        'plugin:storybook/recommended',
    ],
    rules: {
        // Include .prettierrc.js rules
        'prettier/prettier': ['error', {}, { usePrettierrc: true }],

        'react/display-name': 'warn',
        'import/no-anonymous-default-export': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
    },
    settings: {
        'import/resolver': {
            typescript: {},
        },
    },
};

这不起作用 我确实收到错误

Module not found: Error: Can't resolve '@/c/services/api' in somepath

知道如何实现这一目标吗？

PS：这个配置在 NextJS 中效果很好。我在那里使用打字稿路径别名，我可以构建并且 eslint 也可以识别它们

Answer 1

我尝试了react-rewire-app但没有成功。

我最后用

craco

解决了这个问题

除了我的问题中提到的步骤之外，我还执行了以下操作：

1

yarn add -D @craco/craco

2 添加

craco.config.js

const path = require('path');

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

3. 创建

   tsconfig.paths.js

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/c/*": ["src/c/*"]
    }
  }
}

4. 修改

   tsconfig.json

   以扩展上面的路径

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "noImplicitAny": false,
    "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"
  ],
  "extends": "./tsconfig.paths.json"
}

5. 在 package.json 中替换以下脚本

    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",

6. 使用我问题中的 eslintrc.js