Babel.js 绝对导入:React和 typescript

lx0bsm1f  于 2022-12-08  发布在  Babel
关注(0)|答案(4)|浏览(237)

背景
我有一个使用create-react-app和typescript引导的React应用程序。随着应用程序的增长,(目标)我希望实现绝对导入。我使用VS代码(Visual Studio代码),只需很少的配置,我就可以使用TS和VS代码来识别我的绝对导入。
对于TS,我在我的tsconfig.json中采取了以下步骤:

  • 将“baseUrl”更改为“client”:"baseUrl": "client"
  • 已将“client”添加到我的include密钥:"include": ["./**/*.ts", "./**/*.tsx", "client"]

对于VS代码,我更改了用户设置:打印脚本-〉首选项:导入模块说明符-〉非相对
效果很好。我所有的导入都使用绝对导入,没有错误。但是,当我运行应用程序时,我得到了一个错误:Error: Cannot find module "component"我期望看到我的应用程序像我之前做的绝对进口。

我的尝试

我认为错误是webpack或babel问题。
1.已创建env文件
将以下内容添加到应用程序根目录下的env文件中(与my package.json的位置相同)

NODE_PATH=client/

这不起作用。同样的错误:Error: Cannot find module "components"。还尝试将NODE_PATH更改为REACT_APP_NODE_PATH,但也不起作用。
1.修改巴别塔配置
yarn add -D babel-plugin-module-resolver添加了Babel插件模块解析器。然后修改了我的babel.config.js

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

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

参考资料我使用了很多不同的文章来试图找到清晰的答案。下面是一些:

  • 使用凯尔Truong的Create React应用程序进行绝对导入(here
  • 创建React应用程序中的绝对导入,作者:Michael Bednarz(here
  • 为TypeScript配置React绝对导入,作者:Justin诺埃尔(here
  • 在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就像我在一个典型的React应用程序中的srcassets是我的服务器的“入口目录”,它位于root dir中。
任何帮助都将不胜感激。

rqenqsqc

rqenqsqc1#

找到答案了,不需要env文件,只需要修改tsconfig.jsonwebpack.config.js文件即可。

TS配置

添加了两个密钥:baseUrlpaths。将baseUrl设置为您的srcclient目录。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']
  }
})

用法要立即导入某些内容,我可以用“client”替换相对导入。这是:

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

变成了:

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

如果有更好的方法,请发布您的解决方案。😀

更新日期:🥧2022天

若要使用较新版本的tsccreate-react-app执行此操作

npx tsc --init

npx create-react-app my-new-app --template typescript

您只需要修改tsconfig.json中的baseUrl属性。如果您希望基目录成为根目录,则可以将baseUrl设置为.,如果您希望它成为源目录,则可以将src设置为src

示例

文件树
第一个
您仍然可以指定路径,如果你愿意,但我发现baseUrl是足够的。

VS代码

如果你使用的是VS代码,你这样做,它不工作,你可能需要修补你的typescript.preferences.importModuleSpecifier设置。

正在更新“typescript.preferences.importModuleSpecifier”设置

1.转到VS代码设置(而不是GUI中的JSON文件)
1.搜索“类型脚本.首选项.导入模块说明符”
1.验证是否已选择“最短”或“非相对
“最短”表示只有在“非相对”导入比使用相对导入短时,才会使用该导入。

示例:最短导入与非相对导入

import Bar from "src/hello/world/foo/bar";
import Bar from "./foo/bar"; // <- this is shorter so it will use this even though it's relative

如果这样做不起作用,您可能需要重新启动ts服务器。您可以通过以下方法来执行此操作
1.打开TS文件
1.进入命令选项板
1.正在搜索“类型脚本:重新启动TS服务器”
希望能帮上忙。

uqxowvwt

uqxowvwt2#

我的解决方案是使用babel-plugin-module-resolver。为什么?因为它允许我这样做。

import Comp1 from 'components/comp1';
import AnotherAppComp from '@app/anotherComp';

它的配置更加灵活,允许别名或直接访问。
babel.config.js中,添加此插件:

plugins: [
[
  require.resolve('babel-plugin-module-resolver'),
  {
    cwd: 'babelrc',
    extensions: [
      '.js',
      '.jsx',
      '.ts',
      '.tsx',
      '.android.js',
      '.android.tsx',
      '.ios.js',
      '.ios.tsx',
    ],
    root: ['.'],
    alias: {
      '@app': './another-app',  // path to your app folder
    },
  },
],
...
]

然后在tsconfig.json中,将 * 编译器选项 * 更改为:

"compilerOptions": {
...
    "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
    "paths": {
      "@app/*": ["./another-app/*"],
      "*": ["./src/*"],
    },
...
  }

我必须重新启动我的vscode才能让它工作,这是第一次。之后,当我编辑我不需要重新启动了。

wmvff8tz

wmvff8tz3#

为TypeScriptReact绝对导入

下面是它的工作原理。修改您的tsconfig.json文件,使其如下所示:

{
      "compilerOptions": {
        ...
        "baseUrl": "src"
      },
      "include": ["src"]
    }
9gm1akwq

9gm1akwq4#

这里我写了一篇关于How to Use Absolute Imports in React的文章。对于你的情况,这是专门针对React Typescript的。因此,你需要在项目的根目录下添加//更新你的tsconfig.json文件。然后你需要更新文件中的编译器选项baseUrl。

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

VS代码足够聪明,能够理解tsconfig.json

用于WebStrom / IntelliJ创意

在项目窗口中选择src文件夹并右击它。选择选项标记目录为,然后选择资源根选项。然后转到设置-〉编辑器-〉代码样式-〉JavaScript并选择导入选项卡。然后选中使用相对于项目、资源或源根的路径。
Webpack允许绝对导入已经很长时间了。当你给你的别名文件夹命名时,你需要使用PascalCase/CamelCase,因为这是Webpack遵循的惯例。

相关问题