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

目前最流行的解决方案是tsconfig-paths。

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

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

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

这个项目非常年轻，所以如果你的设置非常复杂，可能会有一些问题。 它完美地适用于我的设置，尽管我的设置相当复杂。

你可以结合使用baseUrl和路径文档。

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

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

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

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

使用这个检出编译器操作

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

“baseUrl " src "

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

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

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

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

Typescript配置文件有相同的答案。 只要指定baseUrl，配置就会照顾你的相对路径。

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

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

最终会像下面这样

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

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

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

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

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

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

正确是很重要的。

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

src /功能/ Home.tsx

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