打字稿模块解析

Question

我已经启动了一个新的 ts 项目，文件结构如下：

/src
    /dir1
        /dir2
            app.ts
    /dir3
        index.ts

我以这样的方式在index.ts 中导入模块app.ts： import app from '../dir1/dir2/app.ts'

我想用这样的别名 @ 编写代码： import app from '@/dir1/dir2/app.ts' 或者至少喜欢import app from 'dir1/dir2/app.ts'

阅读文章和文档我发现问题可以通过像这样添加baseUrl 到tsconfig.json 来解决：

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es2020",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "baseUrl": "./src"
  },
  "include": [
    "src/**/*"
  ],
}

但是，结果文件index.js 需要dir1/dir2/app，并带有一条消息：Error: Cannot find module。我可以只使用 TypeScript 设置，而不使用 Babel、Webpack 和其他大型库来处理这个问题吗？

Answer 1

不应该是import app from '/dir1/dir2/app.ts'

可能有用https://css-tricks.com/quick-reminder-about-file-paths/

Answer 2

baseUrl 将启用相对于它的非相对外观的模块分辨率。

如果您使用"baseUrl": "./src"，那么您可以像这样导入/src 中的任何模块：

import app from 'dir1/dir2/app.ts' // this is still relative to the /src dir

如果您想使用“@”之类的前缀，则可以使用 paths 编译器选项，该选项将重新映射相对于 baseUrl 的导入位置。

{
  "baseUrl": "/src",
  "paths": {
    "@dir1/*": ["./dir1/*"] // map imports from @dir1/ to ./dir1
  }
}

用法：

import app from '@dir1/dir2/app' 

Relative and Non-relative imports