Jeg leste om path-mapping i tsconfig.json
, og jeg ønsket å bruke det for å unngå å bruke følgende stygge stier:
[]]1
Prosjektorganiseringen er litt merkelig fordi vi har et mono-repository som inneholder prosjekter og biblioteker. Prosjektene er gruppert etter selskap og etter nettleser/server/universal.
Hvordan kan jeg konfigurere stiene i tsconfig.json
slik at i stedet for:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
kan jeg bruke:
import { Something } from "lib/src/[browser/server/universal]/...";
Vil det være nødvendig med noe annet i webpack-konfigurasjonen, eller er tsconfig.json
nok?
Dette kan konfigureres i tsconfig.json-filen, siden det er en TS-funksjon.
Du kan gjøre slik:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
Husk at banen du vil henvise til, tar baseUrl som base for ruten du peker til, og det er obligatorisk som beskrevet i dokumentet.
*Tegnet '@' er ikke obligatorisk.
Når du har satt den opp på denne måten, kan du enkelt bruke den slik:
import { Yo } from '@config/index';
det eneste du kanskje vil legge merke til er at intellisense ikke fungerer i den nyeste versjonen, så jeg foreslår at du følger en index-konvensjon for import/eksport av filer.
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
**OPPDATERING Ta en titt på dette eksemplet jeg har laget for å vise hvordan mapping til en enkelt fil fungerer:
https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea
Du kan bruke en kombinasjon av baseUrl
og paths
docs.
Forutsatt at root er på øverste src
dir (og jeg leser bildet ditt riktig), bruk
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
For webpack
må du kanskje også legge til module resolution. For webpack2
kan dette se slik ut
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
hvis typescript + webpack 2 + at-loader brukes, er det et ekstra trinn (@mleko's løsning fungerte bare delvis for meg):
// 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 } */)
]
}