tsconfig.json`da path-mapping hakkında bir şeyler okuyordum ve aşağıdaki çirkin yolları kullanmaktan kaçınmak için bunu kullanmak istedim:
Proje organizasyonu biraz garip çünkü projeleri ve kütüphaneleri içeren tek bir depomuz var. Projeler şirkete göre ve tarayıcı / sunucu / evrensel olarak gruplandırılmıştır.
Bunun yerine tsconfig.json
içindeki yolları nasıl yapılandırabilirim:
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ı? yoksa tsconfig.json
yeterli mi?
Bu, bir TS özelliği olduğu için tsconfig.json dosyanızda ayarlanabilir.
Şöyle yapabilirsin:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@app/*": ["app/*"],
"@config/*": ["app/_config/*"],
"@environment/*": ["environments/*"],
"@shared/*": ["app/_shared/*"],
"@helpers/*": ["helpers/*"]
},
...
Referans vermek istediğiniz yolun, işaret ettiğiniz rotanın tabanı olarak baseUrl'nizi aldığını ve dokümanda açıklandığı gibi zorunlu olduğunu unutmayın.
Bu şekilde ayarladıktan sonra, bu şekilde kolayca kullanabilirsiniz:
import { Yo } from '@config/index';
Fark edebileceğiniz tek şey, intellisense'in mevcut en son sürümde çalışmadığıdır, bu nedenle dosyaları içe / dışa aktarmak için bir dizin kuralını izlemenizi öneririm.
GÜNCELLEME Tek bir dosyaya nasıl eşlendiğini göstermek için yaptığım bu örneğe göz atın:
https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea
baseUrlve
paths` kombinasyonlarını kullanabilirsiniz docs.
Kök dizinin en üstteki src
dizininde olduğunu varsayarsak (ve resminizi doğru okuduysam)
// tsconfig.json
{
"compilerOptions": {
...
"rootDir": ".",
"paths": {
"lib/*": [
"src/org/global/lib/*"
]
}
}
}
webpackiçin ayrıca [module resolution][2] eklemeniz gerekebilir. webpack2
için bu şöyle görünebilir
// webpack.config.js
module.exports = {
resolve: {
...
modules: [
...
'./src/org/global'
]
}
}
typescript + webpack 2 + at-loader kullanılıyorsa, ek bir adım vardır (@mleko'nun çözümü benim için sadece 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 } */)
]
}