Question

我已经开始了一个具有以下文件结构的新ts项目：

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

我以以下方式在app.ts中导入模块index.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

打字稿模块解析

2 个答案: