javascript - Typescript-kompilator hittar inte absoluta sökvägar när filer inkluderas i tsconfig.json


Jag försöker använda absoluta sökvägar när jag importerar moduler i JS, tyvärr misslyckas tsc med att lösa sökvägarna korrekt och returnerar fel:

Modulnamn 'test2' kunde inte lösas.

Jag har följande filsstruktur

project
│
└───tsconfig.json
└───js
│   └───another
│   │   └───child
│   │       │  test1.js
│   │
│   └───some
│       │  test2.js

Detta är test1.js-kod:

import { sayHi } from "test2";
sayHi("John");

Detta är test2.js-kod:

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

export { sayHi };

och detta är min tsconfig.json:

{
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true
  },
  "include": [
    "js/**/*"
  ],
  "exclude": []
}

Via CLI-kommandot när jag kör tsc --traceResolution och jag får följande:

╰─ tsc --traceResolution
======== Resolving module 'test2' from '/Users/Sites/LocalTests/js/another/child/test1.js'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module 'test2' from 'node_modules' folder, target file type 'TypeScript'.
Directory '/Users/Sites/LocalTests/js/another/child/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/LocalTests/js/another/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/LocalTests/js/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/LocalTests/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/node_modules' does not exist, skipping all lookups in it.
Directory '/node_modules' does not exist, skipping all lookups in it.
Loading module 'test2' from 'node_modules' folder, target file type 'JavaScript'.
Directory '/Users/Sites/LocalTests/js/another/child/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/LocalTests/js/another/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/LocalTests/js/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/LocalTests/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/Sites/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/node_modules' does not exist, skipping all lookups in it.
Directory '/node_modules' does not exist, skipping all lookups in it.
======== Module name 'test2' was not resolved. ========

Hur ställer jag in det så att det inte bara söker upp genom katalogerna utan också inuti syskonkataloger. När man tittar på spåret som returneras verkar det som att det aldrig tittar på /some-katalogen, och därför aldrig hittar test2.js.

Om man tittar på andra inlägg verkar det som att jag kan lägga till sökvägen till /some i avsnittet paths: i tsconfig.json, men det innebär att jag manuellt skulle behöva lägga till varje enskild sökväg, vilket inte är logiskt eftersom jag planerar att använda flera kataloger när detta projekt växer.

Om du också undrar, planerar jag att använda denna tsconfig.json-fil i VScode för att den ska kunna hitta absoluta sökvägar och låta dess funktion "Gå till definition" fungera korrekt.

Svar #1

Det här är inte tänkt att fungera. TypeScript-kompilatorn har inget sätt att veta var den ska hitta din fil när du importerar "test2".

Dessutom är "test2" ett filnamn, inte en absolut sökväg. För att göra det till en absolut sökväg skulle det behöva sökvägen hela vägen från roten på din hårddisk, vilket uppenbarligen skulle vara dålig praxis eftersom det skulle göra din kod beroende av exakt var filerna är lagrade på din dator.

Sättet som TypeScript-kompilatorn hittar importer på är:

  • Om det är en relativ sökväg, följ den
  • Om inte, sök efter det i node_modules
  • Om inte, sök i föräldramappens node_modules
  • Fortsätt göra det tills det hittas

Så du behöver att din fil har en relativ sökväg, eller att den är ett npm-modul.

En funktion som kan hjälpa dig är sökkartläggning som låter dig definiera anpassade sökvägar för TypeScript att leta efter, vilket du kan använda i denna situation.

Till exempel:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "test2": ["some/test2.js"], // This mapping is relative to "baseUrl"
      "some/*": ["some/*"] // You could use this to then import "some/test2"
    }
  }
}

Svar #2

Du måste lägga till detta i din tsconfig.json

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