反应绝对导入路径

Question

我对 React 相当陌生，使用版本 18.2.0。

我似乎无法让 jsconfig.json 中的“路径”正常工作。

{
"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/models/*": ["src/models/*"],
      "@/public/*": ["public/*"],
      "@/src/*": ["src/*"],
      "@/styles/*": ["src/styles/*"]
    }
  },
  "include": ["./"],
  "exclude":["node_modules","build"]
 }

我的导入不起作用。

来自 src/App.js：

import '@/styles/App.scss';
import Navbar from '@/components/Navbar';

我还在阅读其他似乎可以做到这一点的库？绝对路径是 React 中可用的功能吗？我宁愿不必下载和维护第 3 方库。

标准方法是什么？

干杯！

Answer 1

您可以在 tsconfig.json 中使用此配置进行绝对导入

    {
      "compilerOptions": {
      "target": "es5",
       "lib": [
        "dom",
        "dom.iterable",
        "esnext"
       ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx",
      "baseUrl": "./src"
     },
     "include": ["src/index.tsx","src/custom.d.ts","src/react-app- env.d.ts"],
}

您的进口产品是？

import 'styles/App.scss';
import Navbar from 'components/Navbar';