Bagaimana cara menggunakan path di tsconfig.json?

167

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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?

Remo H. Jansen
sumber
1
Lihat npmjs.com/package/tspath
Patrik Forsberg

Jawaban:

268

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

Alejandro Lora
sumber
36
Hanya komentar yang mungkin membantu orang lain ... jika Anda bekerja dengan node.js atau beberapa lingkungan yang tidak menggunakan bundler modul seperti webpack, Anda juga akan memerlukan modul npmjs.com/package/module-alias
Remo H. Jansen
2
@Alejandro Lora Saya telah menggunakan solusi ini dalam proyek saya ini bekerja seperti pesona tetapi ketika saya menjalankan tes karma tidak dapat menyelesaikan variabel lingkungan. apa yang bisa menjadi alasannya?
Gavishiddappa Gadagi
1
Ini berfungsi dengan baik tetapi ada masalah ketika mengaktifkan deklarasi dan mengimpor modul npm ini di modul lain. Intelisense rusak. Adakah cara untuk memperbaiki masalah ini?
Siwa
1
@Aphax ya. dimungkinkan untuk memetakan ke satu file, saya menyiapkan contoh di sini: github.com/ialex90/TypeScript-Node-Starter/commit/…
Alejandro Lora
2
perhatikan bahwa jest-test tidak menggunakan tsconfig-paths - Anda perlu mendefinisikan moduleNameMapper: tsjest # 414
TmTron
14

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'
        ]
    }
}
mleko
sumber
12

Periksa solusi serupa ini dengan tanda bintang

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

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

James Moran
sumber
6

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.

Joon
sumber
3

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

eeglbalazs
sumber
2

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'
Telapak tangan
sumber
1

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 ..

Vijay
sumber
1

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.

divya_kanak
sumber
0

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

Vipindas Gopalan
sumber
Tidak benar. Banyak opsi memungkinkan untuk impor modul non-relatif .
Nino Filiu
0

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/*" ]
        }
    },
}
Andy Braham
sumber