javascript - 如何在 CRA(create-react-app)和 craco 中通过 webpack 设置别名路径？

Question

我在使用 create-react-app 和 craco 设置 webpack 别名路径时遇到问题，已经在谷歌上搜索，但无法解决问题。
我收到一个错误 Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src每次我使用命令 yarn start 运行应用程序时
重现步骤:

create-react-app my-project

cd my-project

yarn add @craco/craco

cat > craco.config.js (见下面的配置)

替换 react-scripts至craco在 package.json 的“脚本”部分(craco start、craco build 等)

编辑文件src/index.js (替换第 4 行，参见下面的代码)

yarn start

craco.config.js

const path = require("path");

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

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '@app/App'; //replace './App' into '@app/App'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

当前结果 Module not found: Can't resolve '@app/App' in 'C:\ReactSandbox\my-project\src预期的
我避免调用相对路径 hell ，而不是像 ../../../../FilterComment.js 这样的导入模块, 写成 @app/FilterComment.js 会很干净

Answer 1

解决carco:
你需要安装craco-alias，然后会写
craco.config.js

    const CracoAlias = require('craco-alias')

    module.exports = {
      plugins: [
        {
          plugin: CracoAlias,
          options: {
            source: 'tsconfig',
            baseUrl: '.',
            tsConfigPath: './tsconfig.path.json',
          },
        },
      ],
    }

tsconfig.path.json

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"],
          "@svg/*": ["src/assets/svg/*"],
          "@img/*": ["src/assets/images/*"],
          "@icons/*": ["src/assets/icons/*"],
          "@shared/*": ["src/shared/*"],
          "@components/*": ["src/components/*"],
          "@hooks/*": ["src/hooks/*"],
          "@constants/*": ["src/constants/*"],
          "@layout/*": ["src/layout/*"],
          "@services/*": ["src/services/*"]
        }
      }
    }

tsconfig.json

    {
      "extends": "./tsconfig.path.json",
      "compilerOptions": {
        "target": "es5",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "checkJs": false,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noFallthroughCasesInSwitch": true,
        "removeComments": true
      },
      "include": [
        "src",
        "src/configs",
        "react-app-env.d.ts"
      ]
    }