Bagaimana cara menggunakan path di tsconfig.json?

Saya membaca tentang jalan-pemetaan di tsconfig.jsondan saya ingin menggunakannya untuk menghindari menggunakan jalur jelek berikut:

Organisasi proyek agak aneh karena kami memiliki repositori mono yang berisi proyek dan perpustakaan. Proyek dikelompokkan menurut perusahaan dan oleh browser / server / universal.

Bagaimana saya bisa mengkonfigurasi jalur tsconfig.jsonjadi bukannya:

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

Saya bisa menggunakan:

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

Akankah ada hal lain yang diperlukan dalam konfigurasi webpack? atau tsconfig.jsoncukup?

Ini dapat diatur pada file tsconfig.json Anda, karena ini adalah fitur TS.

Anda bisa melakukan ini:

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

Perlu diketahui bahwa jalur tempat Anda ingin merujuk, dibutuhkan baseUrl Anda sebagai basis rute yang Anda tuju dan itu wajib seperti yang dijelaskan pada dokumen.

Karakter '@' tidak wajib.

Setelah Anda mengaturnya dengan cara itu, Anda dapat dengan mudah menggunakannya seperti ini:

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

satu-satunya hal yang mungkin Anda perhatikan adalah intellisense tidak berfungsi di versi terbaru saat ini, jadi saya akan menyarankan untuk mengikuti konvensi indeks untuk mengimpor / mengekspor file.

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

Anda dapat menggunakan kombinasi baseUrldan paths dokumen .

Dengan asumsi root berada di srcdir paling atas (dan saya membaca gambar Anda dengan benar) gunakan

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

Untuk webpackAnda mungkin juga perlu menambahkan resolusi modul . Untuk webpack2ini bisa terlihat seperti

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

Periksa solusi serupa ini dengan tanda bintang

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

Jawaban Alejandros bekerja untuk saya, tetapi karena saya menggunakan awesome-typescript-loaderdengan webpack 4, saya juga harus menambahkan tsconfig-paths-webpack-pluginke file webpack.config saya untuk menyelesaikannya dengan benar

Jika Anda menggunakan jalur, Anda harus mengubah kembali jalur absolut ke jalur relatif agar dapat berfungsi setelah kompilasi naskah dengan javascript biasa tsc.

Solusi paling populer untuk ini adalah tsconfig-paths sejauh ini.

Saya sudah mencobanya, tetapi tidak berhasil bagi saya untuk pengaturan yang rumit. Juga, ia menyelesaikan jalur dalam run-time, yang berarti overhead dalam hal ukuran paket Anda dan menyelesaikan kinerja.

Jadi, saya menulis solusi sendiri, tscpaths .

Saya akan mengatakan itu lebih baik secara keseluruhan karena ini menggantikan jalur pada waktu kompilasi. Ini berarti tidak ada ketergantungan runtime atau overhead kinerja. Cukup mudah digunakan. Anda hanya perlu menambahkan baris ke skrip bangunan Anda package.json.

Proyek ini cukup muda, jadi mungkin ada beberapa masalah jika pengaturan Anda sangat rumit. Ini berfungsi dengan sempurna untuk pengaturan saya, meskipun pengaturan saya cukup kompleks.

jika typescript + webpack 2 + at-loader sedang digunakan, ada langkah tambahan (solusi @ mleko hanya berfungsi sebagian untuk saya):

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

Resolusi jalur lanjutan di TypeScript 2.0

Ini bekerja untuk saya:

 yarn add --dev tsconfig-paths

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

Ini memuat semua jalur di tsconfig.json. Contoh tsconfig.json:

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

Pastikan Anda memiliki baseUrl dan jalur agar ini berfungsi

Dan kemudian Anda dapat mengimpor seperti:

import {AlarmIcon} from 'assets/icons'

Jenisnya relatif jalur Alih-alih kode di bawah ini

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

Kita dapat menghindari "../../../../../" yang terlihat aneh dan tidak dapat dibaca juga.

Jadi file konfigurasi Typecript memiliki jawaban yang sama. Cukup tentukan baseUrl, config akan menangani jalur relatif Anda.

cara mengkonfigurasi : file tsconfig.json menambahkan properti di bawah ini.

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

Jadi Akhirnya akan terlihat seperti di bawah ini

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

Terlihat sederhana, luar biasa, dan lebih mudah dibaca ..

Periksa operasi kompiler menggunakan ini

Saya telah menambahkan baseUrl dalam file untuk proyek seperti di bawah ini:

"baseUrl": "src"

Ini bekerja dengan baik. Jadi tambahkan direktori basis Anda untuk proyek Anda.

/mulai dari root saja, untuk mendapatkan path relatif yang harus kita gunakan ./atau../

Sepertinya telah ada pembaruan untuk Bereaksi yang tidak memungkinkan Anda untuk mengatur "paths"dalam tsconfig.jsonlagi.

Bereaksi dengan baik hanya mengeluarkan peringatan:

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

kemudian perbarui tsconfig.jsondan hapus seluruh "paths"bagian untuk Anda. Ada cara untuk menyiasati lari ini

npm run eject

Ini akan mengeluarkan semua create-react-scriptspengaturan dengan menambahkan configdan scriptsdirektori dan membangun / mengkonfigurasi file ke proyek Anda. Ini juga memungkinkan lebih banyak kontrol atas bagaimana semuanya dibangun, dinamai dll dengan memperbarui{project}/config/* file.

Kemudian perbarui tsconfig.json

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