Saya membaca tentang jalan-pemetaan di tsconfig.json
dan 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.json
jadi 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.json
cukup?
typescript
node-modules
tsconfig
Remo H. Jansen
sumber
sumber
Jawaban:
Ini dapat diatur pada file tsconfig.json Anda, karena ini adalah fitur TS.
Anda bisa melakukan ini:
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:
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.
sumber
moduleNameMapper
: tsjest # 414Anda dapat menggunakan kombinasi
baseUrl
danpaths
dokumen .Dengan asumsi root berada di
src
dir paling atas (dan saya membaca gambar Anda dengan benar) gunakanUntuk
webpack
Anda mungkin juga perlu menambahkan resolusi modul . Untukwebpack2
ini bisa terlihat sepertisumber
Periksa solusi serupa ini dengan tanda bintang
sumber
Jawaban Alejandros bekerja untuk saya, tetapi karena saya menggunakan
awesome-typescript-loader
dengan webpack 4, saya juga harus menambahkantsconfig-paths-webpack-plugin
ke file webpack.config saya untuk menyelesaikannya dengan benarsumber
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.
sumber
jika typescript + webpack 2 + at-loader sedang digunakan, ada langkah tambahan (solusi @ mleko hanya berfungsi sebagian untuk saya):
Resolusi jalur lanjutan di TypeScript 2.0
sumber
Ini bekerja untuk saya:
Ini memuat semua jalur di tsconfig.json. Contoh tsconfig.json:
Pastikan Anda memiliki baseUrl dan jalur agar ini berfungsi
Dan kemudian Anda dapat mengimpor seperti:
sumber
Jenisnya relatif jalur Alih-alih kode di bawah ini
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.
Jadi Akhirnya akan terlihat seperti di bawah ini
Terlihat sederhana, luar biasa, dan lebih mudah dibaca ..
sumber
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.
sumber
/
mulai dari root saja, untuk mendapatkan path relatif yang harus kita gunakan./
atau../
sumber
Sepertinya telah ada pembaruan untuk Bereaksi yang tidak memungkinkan Anda untuk mengatur
"paths"
dalamtsconfig.json
lagi.Bereaksi dengan baik hanya mengeluarkan peringatan:
kemudian perbarui
tsconfig.json
dan hapus seluruh"paths"
bagian untuk Anda. Ada cara untuk menyiasati lari iniIni akan mengeluarkan semua
create-react-scripts
pengaturan dengan menambahkanconfig
danscripts
direktori 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
sumber