我使用react@17.0.2
和typescript@4.5.2
创建了一个新的React-typescript应用程序:npx create-react-app my-app --template typescript
然后我决定像以前做过很多次的那样定义别名路径。我在我的应用程序的根目录中创建了tsconfig.paths.json
。
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"components/*": ["/components/*"],
"routes/*": ["/routes/*"],
"constants/*": ["/constants/*"]
}
}
}
然后我将extend
属性添加到tsconfig.json
文件中:
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
另外,我安装了react-app-rewired@2.1.8
并创建了config-override.js
:
const path = require('path');
module.exports = function override(config) {
config.resolve = {
...config.resolve,
alias: {
...config.alias,
'components': path.resolve(__dirname, 'src/components/*'),
'routes': path.resolve(__dirname, 'src/routes/*'),
'constants': path.resolve(__dirname, 'src/constants/*'),
}
}
return config;
}
所以我重新打开我的IDE(VSCode)并运行npm start
。我必须提到我在运行start命令之前更改了package.json
中的脚本。
{
.
.
.
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
.
.
.
}
运行start命令后,终端显示此消息,编译失败:
- 对tsconfig.json文件进行了以下更改:- 不能设置compilerOptions.paths(不支持别名导入)*
- 编译失败。
./src/App.tsx模块未找到:无法解析.......* 中的“组件”
所以我开始搜索这个问题来解决它.我发现了许多方法,我将在下面提到其中的一些:
***1.***转到您的jsconfig.json
文件,并将基URL添加为“。”
"compilerOptions": {
"baseUrl": ".",
...
然后就可以直接从src目录导入东西了
import Myfile from "src/myfile.js"
结果==〉不工作!
***2.***这个问题通过一个别名来解决,重新布线。安装react-app-rewire-alias
,然后创建config-override.js
文件:
const {alias, configPaths} = require('react-app-rewire-alias')
module.exports = function override(config) {
alias(configPaths())(config)
return config
}
结果==〉不工作!
***3.***使用craco@6.4.1
包
1.安装craco和craco-aliasnpm install @craco/craco --save
和npm i -D craco-alias
1.在根目录下创建tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@components/*" : ["./components/*"]
}
}
}
1.在tsconfig.json
中扩展tsconfig.paths.json
{“extends”:“./tsconfig.paths.json”,//默认配置...}
1.在根目录下创建craco.config.js
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
// baseUrl SHOULD be specified
// plugin does not take it from tsconfig
baseUrl: "./src",
/* tsConfigPath should point to the file where "baseUrl" and "paths"
are specified*/
tsConfigPath: "./tsconfig.paths.json"
}
}
]
};
1.在package.json
中,将"start": "react-scripts start"
交换为"start": "craco start"
结果==〉不工作!
我很困惑,因为我以前多次使用别名路径,但现在它不起作用。我不想eject
我的应用程序,但使用别名路径是有帮助的。
2条答案
按热度按时间vuktfyat1#
这里有一个工作
不再支持路径别名。
但是为了避免像
../../../
这样烦人的导入路径,您可以直接导入相对于src
目录的文件您可以执行以下操作
转到
tsconfig.json
文件,将基本URL添加为"."
然后可以直接导入与
src
目录相关的内容e3bfsja22#
我能够使它一起工作(typescript + eslint)在几天前创建的Typescript CRA中。这是我如何做到的:
从
package.json
选择的部门:安装模块解析器
配置
tsconfig
我没有
tsconfig.paths.json
webpack
创建新文件或添加到现有
webpack.config.js
eslint
最后
.eslintrc.json