我在tsconfig.json 中阅读了有关path-mapping 的信息，我想用它来避免使用以下丑陋的路径：
项目组织有点奇怪，因为我们有一个包含项目和库的单一存储库。这些项目按公司和浏览器/服务器/通用分组。
如何在tsconfig.json 中配置路径而不是：
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
我可以使用：
import { Something } from "lib/src/[browser/server/universal]/...";
webpack 配置中是否需要其他内容？还是tsconfig.json 够用？
【问题讨论】：
标签： typescript node-modules tsconfig
您可以使用 Subpath patterns 仅使用 Node 来执行此操作。
例如，将此添加到您的package.json...
{
"imports": {
"#lib": "./build/path/to/lib",
"#lib/*": "./build/path/to/lib/*",
}
}
...会让你像这样导入，避免相对路径。
import { something } from "#lib"
请注意，它们必须以哈希开头，并且在 package.json 中，它们必须指向您的构建，以便 Node 可以识别它。
就像其他人说的那样，您可以在 tsconfig.json 中为 Typescript 添加类似这样的内容：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#lib": ["./src/path/to/lib"],
"#lib/*": ["./src/path/to/lib/*"],
},
},
}
【讨论】：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
我不确定我们是否必须定义路径。但是在将 baseUrl 写入 src 之后 我可以像这样导入 src 文件夹下的所有文件夹
import { Home } from "pages";
import { formatDate } from "utils";
import { Navbar } from "components";
更改 tsconfig.json 后不要忘记重启终端
【讨论】：
如果您使用的是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... 中找到它。
【讨论】：
2021 年的解决方案。
注意：CRA。最初使用第三方库或弹出应用程序别名的想法对我来说似乎很疯狂。然而，经过 8 个小时的搜索（并尝试了带有弹出的变体），结果证明这个选项是最不痛苦的。
第 1 步。
yarn add --dev react-app-rewired react-app-rewire-alias
第 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', => 添加 react-app-env.d.ts declare module '@constants';
就是这样。现在你可以像往常一样继续使用 yarn 或 npm start/build/test 命令了。
注意：文档中的 “与 ts / js 配置一起使用” 部分对我不起作用。构建项目时的错误“不支持别名导入”仍然存在。所以我用了一种更简单的方法。幸运的是它有效。
【讨论】：
react-app-rewired package is lightly maintained 所以你不应该继续使用这个包你应该使用 craco 代替
craco，发现有大约 20 个过期的依赖项，其中一些存在严重漏洞。
您可以使用baseUrl 和paths docs 的组合。
假设 root 位于最顶层 src dir（并且我正确阅读了您的图像）使用
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
对于webpack，您可能还需要添加module resolution。对于webpack2，这可能看起来像
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
【讨论】：
baseUrl，你在说rootDir ... — 有什么区别？
这可以在您的 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
【讨论】：
moduleNameMapper: tsjest#414
tsconfig-paths/register 和 ts-node/register/transpile-only。
【讨论】：
这对我有用：
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": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
【讨论】：
看起来 React 有一个更新，不允许您再在 tsconfig.json 中设置 "paths"。
Nicely 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 目录和构建/配置文件添加到您的项目中来弹出所有create-react-scripts 设置。通过更新{project}/config/* 文件，这还允许更多地控制所有内容的构建、命名等。
然后更新您的tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
{…}
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}
【讨论】：
tsconfig.base.json 中，您可以放置你的路径配置 ``` { "compilerOptions": { "paths": { "": [""] } } } ``` 错误仍然会显示，但它不会再删除你的设置.这里有更多关于为什么会发生这种情况的信息github.com/facebook/create-react-app/issues/…
它的一种相对路径 而不是下面的代码
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]/...";
它看起来很简单，很棒，更易读..
【讨论】：
/ 仅从根开始，要获取相对路径，我们应该使用 ./ 或 ../
【讨论】：
如果您使用路径，则需要在使用 tsc 将 typescript 编译为纯 javascript 后将绝对路径改回相对路径才能正常工作。
到目前为止，最流行的解决方案是tsconfig-paths。
我已经尝试过了，但它对我复杂的设置不起作用。 此外，它在运行时解析路径，这意味着在包大小和解析性能方面的开销。
所以，我自己写了一个解决方案，tscpaths。
我会说它总体上更好，因为它在编译时替换了路径。这意味着没有运行时依赖或任何性能开销。使用起来非常简单。您只需在 package.json 中的构建脚本中添加一行。
该项目还很年轻，因此如果您的设置非常复杂，可能会出现一些问题。 尽管我的设置相当复杂，但它对我的设置完美无缺。
【讨论】：
Alejandros 的回答对我有用，但由于我将 awesome-typescript-loader 与 webpack 4 一起使用，我还必须将 tsconfig-paths-webpack-plugin 添加到我的 webpack.config 文件中才能正确解析
【讨论】：
如果正在使用 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 } */)
]
}
【讨论】：