Ich habe über path-mapping in tsconfig.json
gelesen und wollte es benutzen, um die folgenden hässlichen Pfade zu vermeiden:
Die Projektorganisation ist ein wenig seltsam, weil wir ein Monorepository haben, das Projekte und Bibliotheken enthält. Die Projekte sind nach Unternehmen und nach Browser / Server / Universal gruppiert.
Wie kann ich die Pfade in tsconfig.json
so konfigurieren, dass anstelle von:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
ich verwenden kann:
import { Something } from "lib/src/[browser/server/universal]/...";
Wird etwas anderes in der Webpack-Konfiguration benötigt oder reicht die tsconfig.json
aus?
Dies kann in Ihrer tsconfig.json-Datei eingerichtet werden, da es sich um eine TS-Funktion handelt.
Sie können wie folgt vorgehen:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
Denken Sie daran, dass der Pfad, auf den Sie verweisen wollen, Ihre baseUrl als Basis der Route nimmt, auf die Sie verweisen, und es ist obligatorisch, wie in der Dokumentation beschrieben.
*Das Zeichen '@' ist nicht obligatorisch.
Nachdem Sie es auf diese Weise eingerichtet haben, können Sie es einfach wie folgt verwenden:
import { Yo } from '@config/index';
Das Einzige, was Sie vielleicht bemerken, ist, dass die Intellisense in der aktuellen Version nicht funktioniert, daher würde ich vorschlagen, eine Indexkonvention für den Import/Export von Dateien zu verwenden.
UPDATE Schauen Sie sich dieses Beispiel an, das ich gemacht habe, um zu zeigen, wie die Zuordnung in eine einzelne Datei erfolgt:
https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea
Sie können eine Kombination aus baseUrl
und paths
verwenden docs.
Angenommen, root befindet sich im obersten src
-Verzeichnis (und ich habe Ihr Bild richtig gelesen), verwenden Sie
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
Für webpack
müssen Sie möglicherweise auch module resolution hinzufügen. Für webpack2
könnte dies wie folgt aussehen
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
wenn typescript + webpack 2 + at-loader verwendet wird, gibt es einen zusätzlichen Schritt (@mleko's Lösung war nur teilweise für mich arbeiten):
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
resolve: {
plugins: [
new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
]
}