2017-04-07 19 views
21

मैं के बारे में path-mappingtsconfig.json में पढ़ रहा था में रास्तों का उपयोग कैसे करें और मैं इसे उपयोग करने के लिए निम्नलिखित बदसूरत रास्तों का उपयोग कर से बचना चाहता था:tsconfig.json

enter image description here

परियोजना संगठन थोड़ा अजीब है, क्योंकि हम एक मोनो-रिपोजिटरी है जिसमें परियोजनाएं और पुस्तकालय शामिल हैं। परियोजनाओं को कंपनी द्वारा और ब्राउज़र/सर्वर/सार्वभौमिक द्वारा समूहीकृत किया जाता है।

enter image description here

मैं कैसे tsconfig.json में रास्तों तो बजाय कॉन्फ़िगर कर सकते हैं:

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

मैं उपयोग कर सकते हैं:

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

विल कुछ और webpack config में आवश्यक हो? या tsconfig.json पर्याप्त है?

उत्तर

40

यह आपके tsconfig.json फ़ाइल पर स्थापित किया जा सकता है क्योंकि यह एक टीएस सुविधा है।

आप इस तरह कर सकते हैं:

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

कि पथ जहां का उल्लेख करना चाहते हैं, यह मार्ग आप ओर इशारा करते हैं के आधार के रूप में अपने baseurl लेता है और यह अनिवार्य रूप पर वर्णित है मन में है डॉक्टर

चरित्र '@' अनिवार्य नहीं है।

आप इसे उस तरह से पर सेट करने के बाद, आप आसानी से इसे इस तरह उपयोग कर सकते हैं:

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

केवल एक चीज है तो हो सकता है कि IntelliSense वर्तमान नवीनतम संस्करण में काम नहीं करता, तो मैं है फ़ाइलों को आयात/निर्यात करने के लिए एक सूचकांक सम्मेलन का पालन करने का सुझाव देगा।

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

+0

बस एक टिप्पणी जो दूसरों की मदद कर सकती है ... यदि आप node.js या कुछ वातावरण के साथ काम कर रहे हैं जो वेबपैक जैसे मॉड्यूल बंडलर का उपयोग नहीं करते हैं तो आपको अतिरिक्त https://www.npmjs.com/package/module की आवश्यकता होगी -लाइस मॉड्यूल –

-1

यदि मुझे गलत नहीं है, तो ./ का अर्थ फ़ाइल की वर्तमान निर्देशिका से शुरू करना है जबकि / रूट से शुरू करना है। तो तुम एक /

+1

यह विभाजन की जड़ होगी। –

3

साथ शुरुआत में सभी ../ रों जगह ले सकता है आप baseUrl और pathsdocs के संयोजन का उपयोग कर सकते हैं।

मान लिया जाये कि जड़ सर्वोच्च src dir पर है (और मैं अपनी छवि को पढ़ने के ठीक से)

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

का उपयोग webpack आप भी module resolution जोड़ने की जरूरत हो सकती है। webpack2 के लिए यह दिखाई दे सकता है

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

अगर टाइपप्रति + webpack 2 + पर-लोडर किया जा रहा है, वहाँ एक अतिरिक्त कदम (@ mleko का समाधान केवल आंशिक रूप से मेरे लिए काम कर रहा था) है:

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

Advanced path resolution in TypeScript 2.0

0

तारों के साथ इसी तरह के समाधान की जांच करें

"baseUrl": ".", 
    "paths": { 
     "*": [ 
     "node_modules/*", 
     "src/types/*" 
     ] 
    }, 
संबंधित मुद्दे