typescript - Kuinka voin käyttää polkuja tsconfig.jsonissa?

Luin polkujen kartoituksesta tiedostossa tsconfig.json, ja halusin käyttää sitä välttääkseni seuraavien rumien polkujen käyttämisen:

Projektiorganisaatio on hieman outo, koska meillä on mono-repositorio, joka sisältää projekteja ja kirjastot. Projektit on ryhmitelty yrityksen ja selain/palvelin/universaali perusteella.

Kuinka voin määrittää polut tiedostossa tsconfig.json, jotta sen sijaan:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Voin käyttää:

import { Something } from "lib/src/[browser/server/universal]/...";

Tarvitaanko Webpack-konfiguraatiossa jotain muuta? Vai riittääkö tsconfig.json-tiedosto?

Vastaus #1

Tämä voidaan asettaa tsconfig.json-tiedostossasi, koska se on TypeScript-ominaisuus.

Voit tehdä näin:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Pidä mielessä, että polku, johon haluat viitata, käyttää baseUrlia reitin perustana, johon osoitat, ja se on pakollinen kuten dokumentaatiossa on kuvattu.

Merkki '@' ei ole pakollinen.

Kun olet asettanut sen näin, voit käyttää sitä helposti näin:

import { Yo } from '@config/index';

Ainoa asia, jonka saatat huomata, on, että intellisense ei toimi nykyisessä viimeisimmässä versiossa, joten ehdottaisin noudattamaan indeksiä koskevaa käytäntöä tiedostojen tuomisessa/viennissä.

Viite: Moduulin ratkaisu

Vastaus #2

Voit käyttää yhdistelmää baseUrl- ja paths-dokumentaatiosta.

Oletetaan, että juurihakemisto on ylimmässä src-hakemistossa (ja luin kuvasi oikein), käytä:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

Webpackia varten saatat myös tarvita moduulin ratkaisemisen lisäämistä. Webpack 2:ssa tämä voisi näyttää tältä:

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}

Vastaus #3

Tarkista nämä samankaltaiset ratkaisut tähdellä merkittynä

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

Vastaus #4

Jos etsit kaikkein minimalistisinta esimerkkiä juurikansiosi viittauksesta @-merkillä, tämä olisi se:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/utils/logUtils';

Tai jos sinulla ei ole edes src-kansiota tai haluat sisällyttää sen tuonteihin nimenomaisesti, tämäkin toimisi:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*"]
    }
  }
}
// Example usage: import * as logUtils from '@/src/utils/logUtils';

Vastaus #5

Tämä toimii minulle:

yarn add --dev tsconfig-paths

ts-node -r tsconfig-paths/register <your-index-file>.ts

Tämä lataa kaikki polut tiedostosta tsconfig.json. Esimerkki tiedostosta tsconfig.json:

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

Varmista, että sinulla on sekä baseUrl että polut tämän toimimiseksi.

Ja sitten voit tuoda esimerkiksi:

import {AlarmIcon} from 'assets/icons'

Vastaus #6

Jos käytät polkuja, sinun on vaihdettava absoluuttiset polut takaisin suhteellisiin polkuihin, jotta se toimisi sen jälkeen, kun TypeScript-koodi on käännetty tavalliseksi JavaScript-koodiksi käyttämällä tsc.

Suosituin ratkaisu tähän on tähän asti ollut tsconfig-paths.

Olen kokeillut sitä, mutta se ei toiminut minulle monimutkaisessa kokoonpanossani. Lisäksi se ratkaisee polkuja ajonaikana, mikä tarkoittaa lisäkuormaa paketin koon ja ratkaisuajan suhteen.

Joten kirjoitin itse ratkaisun, tscpaths.

Sanoisin, että se on kokonaisuudessaan parempi, koska se korvaa polut käännösaikana. Tämä tarkoittaa, ettei ole suoritusaikaisia riippuvuuksia tai suorituskyvyn ylikuormitusta. Sen käyttö on melko yksinkertaista. Sinun tarvitsee vain lisätä yksi rivi build-skripteihisi package.json-tiedostossa.

Projekti on melko nuori, joten voi olla joitain ongelmia, jos asetuksesi on hyvin monimutkainen. Se toimii kuitenkin moitteettomasti omassa asetuksessani, vaikka asetukseni on melko monimutkainen.

Vastaus #7

Jos käytät tsconfig-pathsia etkä saa tätä toimimaan, kokeile tsconfig.json:

{
  // ...
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "baseUrl": ".",
    "paths": {
      "@some-folder/*": ["./src/app/some-folder/*", "./dist/app/some-folder/*"],
      // ...
    }
  },
  // ...
}

Jos kääntäjä näkee @some-folder/some-class, se yrittää löytää sen kansiosta ./src... tai kansiosta ./dist....