Reactjs 绝对导入：React和Typescript 出身背景

我有一个使用CreateReact应用程序和typescript引导的React应用程序。随着应用程序的发展，我希望实现绝对导入。我使用的是VS代码Visual Studio代码，配置很少，我得到了TS和VS代码来识别我的绝对导入

对于TS，我在tsconfig.json中执行了以下步骤：

将“baseUrl”更改为“客户端”：baseUrl:客户端 将“客户端”添加到我的包含密钥中：包含：[./***/.ts、./***/.tsx、客户端] 对于VS代码，我更改了用户设置：类型脚本->首选项：导入模块说明符->非相对设置

这很有效。我所有的导入都使用绝对导入，没有错误。但是，当我运行应用程序时，我得到一个错误：错误：找不到模块组件，我希望看到我的应用程序，就像绝对导入之前一样

我试过的 我想，这个错误是一个网页或巴别塔问题

创建环境文件

将以下内容添加到与my package.json位于同一位置的应用程序根目录中的env文件中

那是行不通的。相同错误：错误：找不到模块组件。还尝试更改节点路径，以响应同样不起作用的应用程序节点路径

修改Babel配置

添加巴贝尔插件模块分解器与纱线添加-D巴贝尔插件模块分解器。然后将my babel.config.js修改为：

返回相同的错误。每次更改配置文件后，我都会重新启动服务器

参考资源 我用了很多不同的文章来试图弄清楚。以下是一些：

Kyle Truong使用Create React应用程序进行绝对导入 Michael Bednarz的Create React应用程序中的绝对导入 Justin Noel为TypeScript配置React绝对导入 在React组件中使用绝对路径 如何在React应用程序中导入typescript文件中具有绝对路径的js模块？ 还有很多其他的。这些都不管用

项目结构 我的项目结构有点不合常规，或者不是我的典型模式，这可能会引起问题

└── root dir
    ├── assets
    │   └── client
    │       ├── assets
    │       ├── components
    │       ├── hooks
    │       └── ...
    │   └── babel.config.js
    │   └── .babelrc
    │   └── webpack.config.js
    │   └── package.json
    └── server files (no server dir) 

所以客户端就像是典型react应用程序中的src。assets是我的服务器的条目目录，它位于根目录中

---

任何帮助都将不胜感激。

找到了答案。不需要env文件。只需要修改tsconfig.json和webpack.config.js文件

TS配置

添加了两个键：baseUrl和路径。将baseUrl设置为您的src或客户端目录。paths键将包含一个对象，其中包含要在绝对路径中引用的任何对象

{
  "compilerOptions": {
    ...
    "baseUrl": "./client",
    "paths": {
      "client/*": ["./client/*"]
    },
    ...
  },
  "include": ["./**/*.ts", "./**/*.tsx"]
}

网页包配置

在我的例子中添加了src的别名client

module.exports = (env, options) => ({
  ...
  resolve: {
    alias: {
      client: path.resolve(__dirname, 'client/') // added this
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
})

用法 要现在导入某些内容，我可以用client替换相对导入。 这：

变成这样：

import TableHeader from 'client/components/Table/TableHeader'

---

如果有更好的方法，发布你的解决方案 找到了答案。不需要env文件。只需要修改tsconfig.json和webpack.config.js文件

TS配置

添加了两个键：baseUrl和路径。将baseUrl设置为您的src或客户端目录。paths键将包含一个对象，其中包含要在绝对路径中引用的任何对象

{
  "compilerOptions": {
    ...
    "baseUrl": "./client",
    "paths": {
      "client/*": ["./client/*"]
    },
    ...
  },
  "include": ["./**/*.ts", "./**/*.tsx"]
}

网页包配置

在我的例子中添加了src的别名client

module.exports = (env, options) => ({
  ...
  resolve: {
    alias: {
      client: path.resolve(__dirname, 'client/') // added this
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
  }
})

用法 要现在导入某些内容，我可以用client替换相对导入。 这：

变成这样：

import TableHeader from 'client/components/Table/TableHeader'

如果有更好的方法，发布你的解决方案。