Am citit despre cale-mapping în `tsconfig.json și am vrut să-l folosească pentru a evita folosind următoarele urât căi:
Organizarea proiectului este un pic ciudat pentru că avem un mono-depozit care conține proiecte și biblioteci. Proiectele sunt grupate în funcție de companie și de către browser-ul / server / universal.
Cum pot configura trasee în tsconfig.json
deci, în loc de:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
Pot folosi:
import { Something } from "lib/src/[browser/server/universal]/...";
Vor altceva este necesară în webpack config? sau este tsconfig.json
suficient?
Acest lucru poate fi configurat pe tsconfig.fișier json, deoarece este un TS caracteristică.
Poti face astfel:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
Aveți în vedere faptul că calea unde doriți să se refere la, este nevoie de baseUrl ca bază de traseu sunt orientate să și-l's obligatorii, conform descrierii de pe doc.
Caracterul '@' nu este obligatorie.
După ce ați configurat în acest fel, puteți folosi cu ușurință, astfel:
import { Yo } from '@config/index';
singurul lucru care se poate observa este că intellisense nu funcționează în actuala cea mai recentă versiune, așa că aș sugera să urmeze un indice convenția pentru importul/exportul de fișiere.
UPDATE Check out acest exemplu am făcut pentru a prezenta cum este cartografiere într-un singur fișier:
https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea
Puteți utiliza o combinație de baseUrl " și " căi
documente.
Presupunând că rădăcina este pe cel mai de sus src
dir(și am citit imagine corect) utilizarea
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
Pentru webpacks-ar putea, de asemenea, nevoie pentru a adăuga [modulul de rezoluție][2]. Pentru webpack2
acest lucru ar putea arata ca
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
Verifica acest lucru soluții similare cu asterisc
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
Alejandros răspunsul a lucrat pentru mine, dar cum am'm folosind minunat-script-loader cu webpack 4, am avut, de asemenea, pentru a adăuga [
tsconfig-căi-webpack-plugin`]1 a mea webpack.fișier de configurare pentru a rezolva corect
Dacă utilizați căi, veți avea nevoie pentru a schimba înapoi căi absolute relative căi pentru a funcționa după compilarea mașina de scris în simple javascript folosind tsc
.
Cea mai populară soluție pentru acest lucru a fost tsconfig-trasee până în prezent.
Am'am încercat, dar nu au de lucru pentru mine pentru o configurare complicată. De asemenea, se rezolvă căi în run-time, adică aeriene în ceea ce privește pachetul de dimensiunea și de a rezolva performanță.
Deci, am scris-o soluție de mine, tscpaths.
Am'd spune's de ansamblu mai bună, deoarece înlocuiește căi la compilare. Aceasta înseamnă că nu există nici o dependență de execuție sau orice regie de performanță. L's destul de simplu de utilizat. Trebuie doar să adăugați o linie pentru a-ți construi script-uri în pachet.json`.
Proiectul este destul de tânăr, așa că ar putea fi unele probleme în cazul în care configurarea este foarte complicat. Funcționează impecabil pentru configurare, deși setup meu este destul de complex.
dacă mașina de scris + webpack 2 + la-loader este folosit, este un pas suplimentar (@mleko's soluție a fost doar parțial de lucru pentru mine):
// 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 } */)
]
}
Aceasta funcționează și pentru mine:
`` fire add-dev tsconfig-căi
ts-nod -r tsconfig-căi/register <ta-index-fișier>.ts ``
Aceasta încarcă toate căile în tsconfig.json. Un eșantion tsconfig.json:
{ "compilerOptions": { {...} "baseUrl": "./src", "căi": { "active/*": [ "active/*" ], "stiluri/*": [ "stiluri/*" ] } }, }
Asigurați-vă că aveți atât baseUrl și căi pentru ca aceasta să funcționeze
Și apoi puteți importa, cum ar fi :
import {AlarmIcon} din 'active/icoane'
/
pornește de la rădăcină numai, pentru a obține calea relativă ar trebui să folosim ./
sau ../
Acest fel de cale relativă În loc de codul de mai jos
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
Putem evita "../../../../../" sa cautati ciudat și nu poate fi citit prea.
Deci, mașina de Scris config au răspuns pentru același. Doar specifica baseUrl, config va avea grijă de cale relativă.
cum să configurare: tsconfig.fișier json adauga mai jos proprietăți.
"baseUrl": "src",
"paths": {
"@app/*": [ "app/*" ],
"@env/*": [ "environments/*" ]
}
Deci, în Final va arata ca mai jos
import { Something } from "@app/src/[browser/server/universal]/...";
Aspectul său simplu,minunat și mai ușor de citit..
Se pare ca nu a fost o actualizare a Reacționa în care nu't vă permite să setați "căi" " în " tsconfig.json
anylonger.
Frumos Reacționa doar emite un semnal de avertizare:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
apoi actualizează tsconfig.json și elimină întregul
"căi" secțiune pentru tine. Există o modalitate de a obține în jurul valorii de acest termen
npm run eject
Acest lucru va ejecta toate a crea-de a reacționa-script-uri
setări prin adăugarea config " și " script-uri de directoare și de a construi/config fișiere în proiectul dumneavoastră. Acest lucru permite, de asemenea, ***mai mult control*** de-a lungul modul în care totul este construit, nume etc. prin actualizarea
{proiectului}/config/*` files.
Apoi actualizați tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
{…}
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}