如何使用tsconfig.json中的路径?

小开

你可以组合使用baseUrl和paths 文档。

假设根在最上面的src目录(我正确地阅读了你的图像)使用

// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}

对于webpack，你可能还需要添加模块的决议。对于webpack2，它可能是这样的

// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}

小开

最佳答案

这可以在您的tsconfig上设置。json文件，因为它是一个TS特性。

你可以这样做:

"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...

请记住，你想要引用的路径，它以你的baseUrl作为你所指向的路由的基础，这是强制性的，如文档所述。

字符“@”不是强制性的。

设置好之后，你可以像这样轻松地使用它:

import { Yo } from '@config/index';

你可能会注意到的唯一一件事是，智能感知在当前的最新版本中不起作用，所以我建议在导入/导出文件时遵循索引约定。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

小开

如果typescript + webpack 2 + at-loader正在使用，有一个额外的步骤(@mleko的解决方案只部分适用于我):

// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}


// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');


resolve: {
plugins: [
new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
]
}

TypeScript 2.0中的高级路径解析

小开

用星号检查类似的解决方案

  "baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},

小开

Alejandros的答案对我有用，但当我在webpack 4中使用awesome-typescript-loader时，我还必须将tsconfig-paths-webpack-plugin添加到我的webpack中。配置文件以正确解析

小开

如果你正在使用路径，在使用tsc将typescript编译成纯javascript后，你需要将绝对路径更改回相对路径才能工作。

迄今为止，最流行的解决方案是tsconfig-paths。

我已经试过了，但对于我复杂的设置来说，它不适合我。此外，它在运行时解析路径，这意味着根据包大小和解析性能来计算开销

所以，我自己写了一个解决方案，tscpaths。

我认为它总体上更好，因为它在编译时替换路径。这意味着没有运行时依赖关系或任何性能开销。使用起来非常简单。你只需要在package.json中添加一行到你的构建脚本中。

这个项目很年轻，所以如果你的设置非常复杂，可能会有一些问题。它完美地工作在我的设置，虽然我的设置相当复杂

小开

/只从根开始，为了获得相对路径，我们应该使用./或../

小开

相对路径类型而不是下面的代码

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

我们可以避免“../../../../.. .”/“它看起来很奇怪，也不容易读。

所以Typescript配置文件有相同的答案。只要指定baseUrl, config就会关心你的相对路径

配置方法: tsconfig。Json文件添加以下属性。

"baseUrl": "src",
"paths": {
"@app/*": [ "app/*" ],
"@env/*": [ "environments/*" ]
}

最终会像下面这样

import { Something } from "@app/src/[browser/server/universal]/...";

它看起来简单，令人敬畏，更可读。

小开

看起来React已经更新了，不再允许你在tsconfig.json中设置"paths"。

nice React只输出一个警告:

The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)

然后更新你的tsconfig.json并为你删除整个"paths"部分。有个办法可以绕过这条路

npm run eject

这将通过将config和scripts目录和build/config文件添加到您的项目中来弹出所有create-react-scripts设置。通过更新{project}/config/*文件，这也允许更多的控制覆盖所有内容的构建方式，命名等。

然后更新你的tsconfig.json

{
"compilerOptions": {
"baseUrl": "./src",
{…}
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}

小开

这对我来说很管用:

 yarn add --dev tsconfig-paths


ts-node -r tsconfig-paths/register <your-index-file>.ts

这将加载tsconfig.json中的所有路径。tsconfig.json示例:

{
"compilerOptions": {
{…}
"baseUrl": "./src",
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}

确保你有baseUrl和路径来工作

然后你可以像这样导入:

import {AlarmIcon} from 'assets/icons'

小开

使用这检出编译器操作

我在文件中添加了baseUrl项目如下:

"baseUrl": "src"

它工作得很好。因此，为项目添加基本目录。

小开

2021年解决方案。

注意:CRA。最初，使用第三方库或为alias弹出应用程序的想法对我来说似乎很疯狂。然而，经过8个小时的搜索(并尝试了带有eject的变体)，结果发现这个选项是最不痛苦的。

步骤1。

yarn add --dev react-app-rewired react-app-rewire-alias

< p >步骤2。在项目的根目录中创建< >强config-overrides.js < / >强文件，并填充:

const {alias} = require('react-app-rewire-alias')


module.exports = function override(config) {
return alias({
assets: './src/assets',
'@components': './src/components',
})(config)
}

步骤3。修复你的< >强package.json < / >强文件:

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
"eject": "react-scripts eject"
}

如果@declarations不起作用，将它们添加到d.ts文件中。例如: '@constants': './src/constants' =比;add in < >强react-app-env.d.ts < / >强 declare module '@constants';

仅此而已。现在你可以像往常一样继续使用yarn或npm start/build/test命令。

文档完整版本

注意:对我来说，文档没有工作中的使用ts / js配置部分。错误“不支持别名导入”;当建筑项目仍然。所以我用了一个更简单的方法。幸运的是，它起作用了。

小开

如果你正在使用tsconfig-paths并且这对你不起作用，请尝试tsconfig.json:

{
// ...
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"baseUrl": ".",
"paths": {
"@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
// ...
}
},
// ...
}

如果编译器看到@some-folder/some-class，它会试图在./src...或./dist...中找到它。

小开

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

我不确定我们是否必须定义路径。但是在将baseUrl写入src之后我可以像这样导入SRC文件夹下的所有文件夹

import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";

不要忘记在修改tsconfig.json后重新启动您的终端

小开

你可以通过使用子路径模式来实现这一点。

例如，将此添加到package.json…

{
"imports": {
"#lib": "./build/path/to/lib",
"#lib/*": "./build/path/to/lib/*",
}
}

.．.会让你像这样导入，避免相对路径。

import { something } from "#lib"

注意，它们必须以哈希开头，并且在package.json中，它们必须指向您的构建，以便Node能够识别它。

就像其他人说的，你可以在Typescript的tsconfig.json中添加这样的东西:

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#lib": ["./src/path/to/lib"],
"#lib/*": ["./src/path/to/lib/*"],
},
},
}

小开

如果你正在寻找用@引用根文件夹的最简单的例子，那么就是它:

{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
}
}
// Example usage: import * as logUtils from '@/utils/logUtils';

或者如果你甚至没有src文件夹，或者想显式地将它包含在导入中，这也可以工作:

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["*"]
}
}
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';

小开

baseUrl正确是很重要的。

import Home from '@app/features/Home';

src/features/Home.tsx

  "compilerOptions": {
"baseUrl": "./",
"paths": {
"@app/*": [
"src/*"
],
},

小开

对于组件库

如果你正在处理一个返回UI组件的库(如react-bootstrap或antd)，那么这应该适合你。

"compilerOptions": {
....
"rootDir": "src",
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"components/*": ["src/components/*"],
}
},

小开

确保你有｀｛ “compileOnSave":没错, “compilerOptions": { “paths": { “@styles / “(“资产/ scss /"】｝ }， } < / p > < p > ' 这给我带来了麻烦。