reactjs - 绝对导入：React 和 Typescript

问题描述

背景

我有一个使用create-react-app和 typescript 引导的 React 应用程序。随着应用程序的增长，（目标）我想实现绝对导入。我正在使用 VS Code (Visual Studio Code) 并且配置很少，我得到了 TS 和 VS Code 来识别我的绝对导入。

对于 TS，我在我的中采取了以下步骤tsconfig.json：

将“baseUrl”更改为“客户端”："baseUrl": "client"
include在我的密钥中添加了“客户端” ："include": ["./**/*.ts", "./**/*.tsx", "client"]

对于 VS Code，我更改了我的用户设置：Typescript -> Preferences: Import Module Specifier -> non-relative

那效果很好。我所有的导入都使用绝对导入，没有错误。但是，当我运行应用程序时，我收到了一个错误：Error: Cannot find module "component"我希望看到我的应用程序，就像我在绝对导入之前所做的那样。

我试过的

想通了，错误是 webpack 或 babel 问题。

创建env文件

将以下内容添加到应用程序根目录中的 env 文件（与我的 package.json 相同的位置）

NODE_PATH=client/

那没有用。同样的错误：Error: Cannot find module "components"。还尝试将 NODE_PATH 更改为 REACT_APP_NODE_PATH 也不起作用。

修改 Babel 配置

添加了 babel 插件模块解析器，带有yarn add -D babel-plugin-module-resolver. 然后将我的修改babel.config.js为：

module.exports = { 
  env {...}, 
  plugins: [
    [
      'module-resolver',
      {
        cwd: 'babelrc',
        extensions: ['.ts', '.tsx', '.js'],
        alias: {
          client: './client',
        },
      },
    ],
  ]
}

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

参考的资源 我使用了很多不同的文章来试图找到清晰。这里有一些：

Kyle Truong 的 Create React App 绝对导入（这里）
Michael Bednarz 在 Create React App 中的绝对导入（这里）
Justin Noel 为 TypeScript 配置 React Absolute Imports（这里）
在 React 组件中使用绝对路径 ( StackOverflow )
如何在 React 应用程序的 typescript 文件中导入 js 模块（使用绝对路径）？

还有许多其他人。这些都没有奏效。

项目结构

我的项目结构有点“非常规”，或者不是我的典型模式，这可能会导致问题。

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

client就像我在src典型的反应应用程序中一样。assets是我的服务器的“入口目录”，它位于root dir.

任何帮助，将不胜感激。

标签： reactjstypescriptwebpackbabeljs

解决方案

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

TS 配置

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

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

Webpack 配置

为“src”添加了一个别名（在我的例子中是“client”）。

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

用法现在要导入一些东西，我可以用“客户端”替换相对导入。这个：

import TableHeader from '../../../components/Table/TableHeader'

变成这样：

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

如果有更好的方法可以做到这一点，请发布您的解决方案。

reactjs - 绝对导入：React 和 Typescript

问题描述

背景

我试过的

项目结构

解决方案

推荐阅读