javascript - 是否可以声明自己的 typescript 模块并像 npm 包一样导入它们

Question

NPM 包的导入方式如下:

import { Button, Table } from "@material-ui/core";

这非常酷，因为路径“@material-ui/core”可以编译到其他文件中，并且仍然独立于复制文件的文件夹结构工作。

现在我声明了自己的类，有很多导出，我喜欢在很多文件之间共享。例如，我有:

root/shared/ui/ui-components.ts
root/app/pages/home/home-page.ts
root/app/pages/home/components/home-tile.ts

我想在 home-page.ts 和 home-tile.ts 中导入 ui-components.ts 文件> 文件。两者均按如下方式导入:

主页:

import { ... } from "../../../shared/ui/ui-components";

对于家庭瓷砖:

import { ... } from "../../../../shared/ui/ui-components";

请注意，我们必须进入主磁贴的一个文件夹才能访问相同的组件。直接将其复制到其他文件将无法工作。

有没有办法让我可以写

import { ... } from "ui-components";

在 home-page.ts 和 home-tile.ts 文件中？

Answer 1

您可以通过 tsconfig.json 中的路径添加应用程序源:

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

然后您可以从 app/或 Components/绝对导入，而不是相对于当前文件导入:

import {Configuration} from "@components/configurations";

注意:如果路径为

，则必须指定baseUrl