Tsconfig.json dosyasında yollar nasıl kullanılır?

Ben okuyordum yolu-haritalama içinde tsconfig.jsonve aşağıdaki çirkin yolları kullanmaktan kaçınmak için kullanmak istediği:

Proje organizasyonu biraz garip çünkü projeler ve kütüphaneler içeren tek bir havuzumuz var. Projeler şirkete ve tarayıcı / sunucu / evrensel olarak gruplandırılmıştır.

Yolları şu şekilde nasıl yapılandırabilirim tsconfig.json:

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

Kullanabilirim:

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

Webpack yapılandırmasında başka bir şey gerekli olacak mı? ya da tsconfig.jsonyeterli mi?

Bu, TS özelliği olduğu için tsconfig.json dosyanızda ayarlanabilir.

Bunu şöyle yapabilirsiniz:

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

Başvurmak istediğiniz yolun, baseUrl'nizi işaret ettiğiniz yolun tabanı olarak aldığını ve dokümanda açıklandığı gibi zorunlu olduğunu unutmayın.

'@' Karakteri zorunlu değildir.

Bu şekilde ayarladıktan sonra, bu şekilde kolayca kullanabilirsiniz:

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

fark edebileceğiniz tek şey intellisense mevcut en son sürümünde çalışmıyor, bu yüzden dosyaları almak / vermek için bir dizin kuralına uymanızı öneririm.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

baseUrlVe paths dokümanlar kombinasyonunu kullanabilirsiniz .

Kökün en üstte olduğu varsayılarak src(ve resminizi doğru okudum)

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

İçin webpacksize ayrıca eklemeniz gerekebilir modül çözünürlük . İçin webpack2aşağıdaki gibi görünebilir

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

Yıldız işaretiyle bu benzer çözümleri kontrol edin

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

Alejandros yanıtı benim için çalıştı, ancak awesome-typescript-loaderwebpack 4 ile kullandığım için , tsconfig-paths-webpack-plugindoğru şekilde çözmek için webpack.config dosyasına da eklemek zorunda kaldım

Yollar kullanıyorsanız, daktiloyu düz javascript kullanarak derledikten sonra çalışması için mutlak yolları bağıl yollara geri değiştirmeniz gerekir tsc.

Bunun için en popüler çözüm şimdiye kadar tsconfig-path'ları olmuştur .

Denedim, ancak karmaşık kurulumum için işe yaramadı. Ayrıca, yolları çalışma zamanında çözer, yani paket boyutunuz açısından ek yük ve performansı giderir.

Bu yüzden kendime bir çözüm yazdım, tscpaths .

Genel olarak daha iyi olduğunu söyleyebilirim, çünkü derleme zamanında yolları değiştirir. Bu, çalışma zamanı bağımlılığı veya performans yükü olmadığı anlamına gelir. Kullanımı oldukça basit. Sadece yapı komut dosyalarınıza bir satır eklemeniz gerekir package.json.

Proje oldukça genç, bu yüzden kurulumunuz çok karmaşıksa bazı sorunlar olabilir. Kurulumumda sorunsuz çalışıyor, ancak kurulumum oldukça karmaşık.

daktilo + webpack 2 + yükleyici kullanılıyorsa, ek bir adım var (@ mleko'nun çözümü sadece benim için kısmen çalışıyordu):

// 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 } */)
    ]
}

TypeScript 2.0'da gelişmiş yol çözünürlüğü

Bu benim için çalışıyor:

 yarn add --dev tsconfig-paths

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

Bu tsconfig.json içindeki tüm yolları yükler. Örnek tsconfig.json:

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

Bunun çalışması için hem baseUrl hem de yollara sahip olduğunuzdan emin olun

Ve sonra aşağıdaki gibi içe aktarabilirsiniz:

import {AlarmIcon} from 'assets/icons'

Göreli yolun türü Aşağıdaki kodun yerine

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

Biz "../../../../../" onun tuhaf ve okunabilir de kaçınabilirsiniz.

Böylece Typescript yapılandırma dosyası aynı cevap var. Sadece baseUrl'yi belirtin, config göreceli yolunuza bakacaktır.

yapılandırma yolu: tsconfig.json dosyası aşağıdaki özellikleri ekler.

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

Sonunda aşağıdaki gibi görünecek

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

Basit, harika ve daha okunabilir görünüyor ..

Bunu kullanarak derleyici işlemini kontrol edin

BaseUrl dosyasını aşağıdaki gibi bir proje için dosyaya ekledim:

"baseUrl": "src"

İyi çalışıyor. Projeniz için temel dizininizi ekleyin.

/kullanmamız gereken göreli yolu elde etmek için yalnızca kökten başlar ./veya../

Ayarlamak izin vermez Tepki için bir güncelleme olmuştur anlaşılıyor "paths"içinde tsconfig.jsonanylonger.

Nice React sadece bir uyarı verir:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

ardından bilgilerinizi günceller tsconfig.jsonve "paths"bölümün tamamını sizin için kaldırır . Bu koşuyu atlatmanın bir yolu var

npm run eject

Bu tüm çıkmasını sağlayın create-react-scriptsekleyerek ayarlara configve scriptsprojenize dizinleri ve yapı / config dosyaları. Bu aynı zamanda dosyaları güncelleyerek her şeyin nasıl oluşturulduğu, adlandırıldığı vb. Üzerinde çok daha fazla kontrole izin verir {project}/config/*.

Ardından, tsconfig.json

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