reactjs 如何在React中设置所有导入基本路径

cetgtptt 于 2023-02-12 发布在 React

关注(0)|答案(2)|浏览(208)

在create-react-app cli项目中，使用下面的配置将src的所有导入路径设置为基本url
jsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "src/",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

package.json

..
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

所有我想使用的导入语句如下：

import { PanelHeader } from '@/components/panel';

而不是这样：

import { PanelHeader } from '../../../components/panel';

reactjs

来源：https://stackoverflow.com/questions/68337050/how-to-set-base-path-for-all-imports-in-react

2条答案

按热度按时间

t9eec4r01#

通过检查CRA上的绝对导入，您可以看到两件事：
(1)将baseUrl设置为src

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

(2)从名为components的文件夹（src文件夹的子文件夹）导入元件时使用components/..
示例-import Button from 'components/Button';
所以，去掉@/部分。

赞(0）回复(0）举报 2023-02-12

eagi6jfj2#

您需要将它添加到您的webpack配置和jsconfig文件中。
安装以下程序包，
npm install customize-cra react-app-rewired
然后在根项目中创建一个config-overrides.js，并添加以下内容：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

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

将以下内容添加到jsconfig.json中，

{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

您必须使用react-app-rewired来启动项目或将其添加到package.json脚本中，
npx react-app-rewired start或

...
  "scripts": {
    "start": "react-app-rewired start",
...

赞(0）回复(0）举报 2023-02-12

我来回答

reactjs 如何在React中设置所有导入基本路径

2条答案

相关问题

热门标签

最新问答