背景
我有一个使用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应用程序中的src
。assets
是我的服务器的“入口目录”,它位于root dir
中。
任何帮助都将不胜感激。
4条答案
按热度按时间rqenqsqc1#
找到答案了,不需要
env
文件,只需要修改tsconfig.json
和webpack.config.js
文件即可。TS配置
添加了两个密钥:
baseUrl
和paths
。将baseUrl
设置为您的src
或client
目录。paths
键将包含一个对象,其中包含您要在绝对路径中引用的任何内容。Webpack配置
为“src”添加了一个别名(在我的例子中是“client”)。
用法要立即导入某些内容,我可以用“client”替换相对导入。这是:
变成了:
如果有更好的方法,请发布您的解决方案。😀
更新日期:🥧2022天
若要使用较新版本的
tsc
或create-react-app
执行此操作或
您只需要修改
tsconfig.json
中的baseUrl
属性。如果您希望基目录成为根目录,则可以将baseUrl
设置为.
,如果您希望它成为源目录,则可以将src
设置为src
。示例
文件树
第一个
您仍然可以指定路径,如果你愿意,但我发现
baseUrl
是足够的。VS代码
如果你使用的是VS代码,你这样做,它不工作,你可能需要修补你的
typescript.preferences.importModuleSpecifier
设置。正在更新“typescript.preferences.importModuleSpecifier”设置
1.转到VS代码设置(而不是GUI中的JSON文件)
1.搜索“类型脚本.首选项.导入模块说明符”
1.验证是否已选择“最短”或“非相对
“最短”表示只有在“非相对”导入比使用相对导入短时,才会使用该导入。
示例:最短导入与非相对导入
如果这样做不起作用,您可能需要重新启动ts服务器。您可以通过以下方法来执行此操作
1.打开TS文件
1.进入命令选项板
1.正在搜索“类型脚本:重新启动TS服务器”
希望能帮上忙。
uqxowvwt2#
我的解决方案是使用babel-plugin-module-resolver。为什么?因为它允许我这样做。
它的配置更加灵活,允许别名或直接访问。
在babel.config.js中,添加此插件:
然后在tsconfig.json中,将 * 编译器选项 * 更改为:
我必须重新启动我的vscode才能让它工作,这是第一次。之后,当我编辑我不需要重新启动了。
wmvff8tz3#
为TypeScriptReact绝对导入
下面是它的工作原理。修改您的tsconfig.json文件,使其如下所示:
9gm1akwq4#
这里我写了一篇关于How to Use Absolute Imports in React的文章。对于你的情况,这是专门针对React Typescript的。因此,你需要在项目的根目录下添加//更新你的
tsconfig.json
文件。然后你需要更新文件中的编译器选项baseUrl。VS代码足够聪明,能够理解
tsconfig.json
。用于WebStrom / IntelliJ创意
在项目窗口中选择src文件夹并右击它。选择选项标记目录为,然后选择资源根选项。然后转到设置-〉编辑器-〉代码样式-〉JavaScript并选择导入选项卡。然后选中使用相对于项目、资源或源根的路径。
Webpack允许绝对导入已经很长时间了。当你给你的别名文件夹命名时,你需要使用PascalCase/CamelCase,因为这是Webpack遵循的惯例。