Saya membaca tentang path-pemetaan di tsconfig.json
dan saya ingin menggunakannya untuk menghindari menggunakan berikut jelek jalur:
Organisasi proyek adalah sedikit aneh karena kami memiliki mono-repositori yang berisi proyek-proyek dan perpustakaan. Proyek dikelompokkan oleh perusahaan dan oleh browser / server / universal.
Bagaimana saya dapat mengkonfigurasi jalur di tsconfig.json
jadi bukan:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
Saya dapat menggunakan:
import { Something } from "lib/src/[browser/server/universal]/...";
Akan sesuatu yang lain diperlukan dalam webpack config? atau tsconfig.json
cukup?
Hal ini dapat diatur pada anda tsconfig.file json, seperti yang TS fitur.
Anda dapat melakukannya seperti ini:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
Harus diingat bahwa jalan mana yang ingin anda lihat, itu akan membawa anda baseUrl sebagai basis rute anda menunjuk ke dan's wajib seperti yang dijelaskan pada doc.
Karakter '@' tidak wajib.
Setelah anda mengaturnya pada cara itu, anda dapat dengan mudah menggunakannya seperti ini:
import { Yo } from '@config/index';
satu-satunya hal yang anda mungkin melihat bahwa intellisense tidak bekerja di versi terbaru saat ini, jadi saya akan menyarankan untuk mengikuti indeks konvensi untuk mengimpor/mengekspor file.
UPDATE Check out ini contoh yang saya buat untuk menampilkan bagaimana pemetaan ke dalam sebuah file tunggal:
https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea
Anda dapat menggunakan kombinasi dari baseUrl
dan jalan
docs.
Dengan asumsi root adalah di paling atas src
dir(dan saya membaca gambar anda dengan benar) menggunakan
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
Untuk webpack
anda juga mungkin perlu untuk menambahkan modul resolusi. Untuk webpack2
ini bisa terlihat seperti
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
Cek ini solusi yang sama dengan tanda bintang
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
},
Alejandros menjawab bekerja untuk saya, tapi seperti yang saya'm menggunakan awesome-naskah-loader
dengan webpack 4, saya juga harus menambahkan tsconfig-jalan-webpack-plugin
untuk saya webpack.config untuk itu untuk menyelesaikan dengan benar
Jika anda menggunakan path, anda akan perlu untuk mengubah kembali jalan mutlak untuk jalur relatif untuk itu untuk bekerja setelah menyusun naskah ke javascript biasa menggunakan tsc
.
Solusi yang paling populer untuk ini telah tsconfig-jalan sejauh ini.
I've mencoba hal itu, tapi itu tidak bekerja untuk saya untuk saya konfigurasi yang rumit. Juga, itu menyelesaikan jalan di run-time, yang berarti overhead dalam hal ukuran paket dan mengatasi kinerja.
Jadi, saya menulis sebuah solusi sendiri, tscpaths.
I'd katakan's lebih baik secara keseluruhan karena menggantikan jalan pada waktu kompilasi. Itu berarti tidak ada runtime ketergantungan atau beban kinerja. It's cukup sederhana untuk digunakan. Anda hanya perlu menambahkan baris untuk membangun script di paket.json
.
Proyek ini cukup muda, sehingga mungkin ada beberapa masalah jika anda setup sangat rumit. Ia bekerja dengan sempurna untuk setup saya, meskipun saya setup yang cukup kompleks.
jika naskah + webpack 2 + at-loader yang digunakan, ada langkah tambahan (@mleko's solusi hanya sebagian bekerja 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 } */)
]
}
Ini bekerja untuk saya:
`` benang tambahkan --dev tsconfig-jalan
ts-node -r tsconfig-jalan/mendaftar Ini beban semua jalan di tsconfig.json. Contoh tsconfig.json: Pastikan anda memiliki kedua baseUrl dan jalan untuk ini untuk bekerja Dan kemudian anda dapat mengimpor seperti :
{ "kompilatorpilihan": { {...} "baseUrl": "./src", "jalan": { "aset/*": [ "aset/*" ], "gaya/*": [ "gaya/*" ] } }, }
impor {AlarmIcon} dari 'aset/ikon'
/
dimulai dari akar hanya, untuk mendapatkan path relatif kita harus menggunakan ./
atau ../
Jenisnya relatif path Bukan kode di bawah ini
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
Kita dapat menghindari "../../../../../" yang tampak aneh dan tidak dapat dibaca juga.
Jadi Ketangkasan config memiliki jawaban yang sama. Hanya menentukan baseUrl, config akan mengurus path relatif.
cara untuk config: tsconfig.file json tambahkan properti di bawah ini.
"baseUrl": "src",
"paths": {
"@app/*": [ "app/*" ],
"@env/*": [ "environments/*" ]
}
Sehingga Akhirnya hal itu akan terlihat seperti di bawah ini
import { Something } from "@app/src/[browser/server/universal]/...";
Tampilannya sederhana,mengagumkan dan lebih mudah dibaca..
Sepertinya sudah ada pembaruan untuk Bereaksi yang doesn't memungkinkan anda untuk mengatur "jalan"
di tsconfig.json
anylonger.
Baik Bereaksi hanya output peringatan:
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
kemudian update tsconfig.json
dan menghilangkan seluruh "jalan"
bagian untuk anda. Ada cara untuk mendapatkan sekitar ini menjalankan
npm run eject
Ini akan mengeluarkan semua membuat-bereaksi-script
pengaturan dengan menambahkan config
dan script
direktori dan membangun/config file ke dalam proyek anda. Hal ini juga memungkinkan kontrol yang lebih banyak lebih dari bagaimana semuanya dibangun, bernama dll. dengan memperbarui {proyek}/config/*
file.
Kemudian memperbarui tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
{…}
"paths": {
"assets/*": [ "assets/*" ],
"styles/*": [ "styles/*" ]
}
},
}