Ich habe ein einfaches Beispielprojekt mit TypeScript: https://github.com/unindented/ts-webpack-example

Beim Ausführen tsc -p .(mit tscVersion 1.8.10) wird Folgendes ausgelöst:

app/index.ts(1,21): error TS2307: Cannot find module 'components/counter'.
components/button/index.ts(2,22): error TS2307: Cannot find module 'shared/backbone_base_view'.
components/button/index.ts(3,25): error TS2307: Cannot find module 'shared/backbone_with_default_render'.
components/counter/index.ts(2,22): error TS2307: Cannot find module 'shared/backbone_base_view'.
components/counter/index.ts(3,25): error TS2307: Cannot find module 'shared/backbone_with_default_render'.
components/counter/index.ts(4,27): error TS2307: Cannot find module 'shared/backbone_with_subviews'.
components/counter/index.ts(5,20): error TS2307: Cannot find module 'components/button'.

Es beschwert sich über alle Importe lokaler Dateien, wie die folgenden:

import Counter from 'components/counter';

Wenn ich es in einen relativen Pfad ändere, funktioniert es, aber ich möchte nicht, da es mein Leben schwieriger macht, wenn ich Dateien verschiebe:

import Counter from '../components/counter';

Die vscodeCodebasis verwendet keine relativen Pfade, aber für sie funktioniert alles einwandfrei. Daher muss mir in meinem Projekt etwas fehlen: https://github.com/Microsoft/vscode/blob/0e81224179fbb8f6fda18ca7362d8500a263cfef/src/vs/languages/typescript/common /typescript.ts#L7-L14

Sie können mein GitHub-Repo überprüfen, aber falls es hilft, ist hier die tsconfig.jsonDatei, die ich verwende:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "exclude": [
    "dist",
    "node_modules"
  ]
}

Das Lustige ist, dass das Erstellen des Projekts webpackmithilfe von ts-loaderfunktioniert einwandfrei. Ich vermute, es ist nur ein Konfigurationsproblem ...

@vladima hat auf GitHub auf dieses Problem geantwortet :

Die Art und Weise, wie der Compiler Module auflöst, wird durch die Option moduleResolution gesteuert, die entweder nodeoder sein kann classic(weitere Details und Unterschiede finden Sie hier ). Wenn diese Einstellung weggelassen wird, behandelt der Compiler diese Einstellung als nodewenn das Modul ist commonjsund classic- ansonsten. In Ihrem Fall, wenn Sie möchten classic, dass die Modulauflösungsstrategie mit commonjsModulen verwendet wird, müssen Sie sie explizit mithilfe von festlegen

{
    "compilerOptions": {
        "moduleResolution": "node"
    }
}

In VS2019, die Projekteigenschaftenseite Typoskript Bauen hat Tab eine Einstellung (Drop - Down) für „Modulsystem“. Als ich das von "ES2015" auf CommonJS änderte, hörte VS2019 IDE auf, sich darüber zu beschweren, dass weder Axios noch Redux-Thunk gefunden werden konnten (TS2307).

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "src",
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": [
      "es6",
      "dom",
      "es2015.promise"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "rootDir": "src",
    "sourceMap": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "skipLibCheck": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "exclude": [
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "node_modules",
    "obj",
    "**/*.spec.ts"
  ],
  "include": [
    "src",
    "src/**/*.ts",
    "@types/**/*.d.ts",
    "node_modules/axios",
    "node_modules/redux-thunk"
  ]
}

In einigen Fällen müssen Sie nur das includeArray aktualisieren .

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "tests/**/*.ts"],
  "exclude": ["node_modules", ".vscode"]
}

Die vscode-Codebasis verwendet keine relativen Pfade, aber für sie funktioniert alles einwandfrei

Kommt wirklich auf deinen Modullader an. Wenn Sie systemjsmit verwenden baseurl, würde es funktionieren. VSCode verwendet einen eigenen benutzerdefinierten Modullader (basierend auf einer alten Version von requirejs).

Empfehlung

Verwenden Sie relative Pfade, da dies commonjsunterstützt wird. Wenn Sie Dateien verschieben, wird ein Fehler in der Kompilierungszeit für Typoskripte angezeigt (eine gute Sache), sodass Sie besser dran sind als die große Mehrheit der reinen JS-Projekte (auf npm).

Wenn Sie Webstorm verwenden, drücken Sie Strg + Alt + S und öffnen Sie das Einstellungsfenster. Sprachen & Frameworks> TypeScript, aktivieren Sie die Option "tsconfig.json verwenden".

Ich hatte Probleme, eine Aufzählung in Typoskript zu importieren

Fehler TS2307: Modul kann nicht gefunden werden ...

Damit es funktioniert, habe ich die Enumeration in eine andere Datei migriert und diese Änderung vorgenommen:

export enum MyEnum{
    VALUE = "MY_VALUE"
}

zu

export enum MyEnum{
    VALUE = 1
}

In meinem Fall ,

   //app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            //{
            //    HotModuleReplacement = true
            //});

Ich habe es in startup.cs kommentiert