Tsconfig.json में पथ का उपयोग कैसे करें?

Question

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

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

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

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

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

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

क्या वेबपैक कॉन्फ़िगरेशन में कुछ और आवश्यक होगा? या tsconfig.jsonपर्याप्त है?

Comments

पर नज़र npmjs.com/package/tspath

— पैट्रिक Forsberg

Answer 1

यह आपकी tsconfig.json फ़ाइल पर सेट किया जा सकता है, क्योंकि यह एक TS फीचर है।

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

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

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

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

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

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

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

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

Comments

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

— रेमो एच की

@ एलेजैंड्रो लोरा मैंने अपनी परियोजना में इस समाधान का उपयोग किया है यह आकर्षण की तरह काम करता है लेकिन जब मैं एनजी टेस्ट करता हूं तो पर्यावरण चर को हल करने में सक्षम नहीं होता है। क्या कारण हो सकता है?

— गविदिद्दप्पा गडगी

यह पूरी तरह से ठीक काम करता है लेकिन एक समस्या है जब घोषणा को सक्षम करने और इस npm मॉड्यूल को दूसरे मॉड्यूल में आयात करना है। बुद्धि भंग होती है। इस मुद्दे को ठीक करने के बारे में कोई विचार?

— शिव

@Aphax हाँ। किसी एकल फ़ाइल में मैप करना संभव है, मैंने यहां एक उदाहरण तैयार किया: github.com/ialex90/TypeScript-Node-Starter/commit/…

— एलेजैंड्रो लोरा

ध्यान दें कि जेस्ट-टेस्ट tsconfig-path का उपयोग नहीं करते हैं - आपको परिभाषित करने की आवश्यकता है moduleNameMapper: tsjest # 414

— TmTron

Answer 2

आप के संयोजन का उपयोग कर सकते baseUrlहैं और paths डॉक्स ।

मान लें कि रूट सबसे उपरी srcडायर पर है (और मैं आपकी छवि को ठीक से पढ़ता हूं) का उपयोग करें

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

के लिए webpackआप भी जोड़ने की जरूरत हो सकती है मॉड्यूल संकल्प । इसके लिए webpack2जैसा दिख सकता है

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

Answer 3

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

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

Answer 4

अलेजैंड्रोस जवाब ने मेरे लिए काम किया, लेकिन जैसा कि मैं awesome-typescript-loaderवेबपैक 4 के साथ उपयोग कर रहा हूं , मुझे tsconfig-paths-webpack-pluginइसे सही ढंग से हल करने के लिए अपने वेबपैक.कॉन्फिग फ़ाइल में भी जोड़ना पड़ा

Answer 5

यदि आप रास्तों का उपयोग कर रहे हैं, तो आपको सादे जावास्क्रिप्ट का उपयोग करके टाइपस्क्रिप्ट को संकलित करने के बाद काम करने के लिए इसे पूर्ण पथ में बदलने की आवश्यकता होगी tsc।

इसके लिए सबसे लोकप्रिय समाधान अब तक tsconfig-path हैं।

मैंने इसे आज़माया है, लेकिन यह मेरे लिए मेरे जटिल सेटअप के काम नहीं आया। इसके अलावा, यह रन-टाइम में पथों को हल करता है, आपके पैकेज के आकार के संदर्भ में ओवरहेड और प्रदर्शन को हल करता है।

इसलिए, मैंने खुद एक समाधान लिखा, tscpaths ।

मैं कहूंगा कि यह समग्र रूप से बेहतर है क्योंकि यह संकलन-समय पर पथों की जगह लेता है। इसका मतलब है कि कोई रनटाइम निर्भरता या कोई प्रदर्शन ओवरहेड नहीं है। यह उपयोग करने के लिए बहुत सरल है। आपको बस अपनी बिल्ड स्क्रिप्ट में एक पंक्ति जोड़ने की आवश्यकता है package.json।

यह परियोजना काफी युवा है, इसलिए यदि आपका सेटअप बहुत जटिल है तो कुछ मुद्दे हो सकते हैं। यह मेरे सेटअप के लिए त्रुटिपूर्ण काम करता है, हालांकि मेरा सेटअप काफी जटिल है।

Answer 6

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

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

टाइपस्क्रिप्ट 2.0 में उन्नत पथ रिज़ॉल्यूशन

Answer 7

यह मेरे लिए काम करता है:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

यह tsconfig.json में सभी पथ लोड करता है। एक नमूना tsconfig.json:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

सुनिश्चित करें कि आपके पास काम करने के लिए आधार और मार्ग दोनों हैं

और फिर आप जैसे आयात कर सकते हैं:

import {AlarmIcon} from 'assets/icons'

Answer 8

नीचे दिए गए कोड के बजाय इसकी तरह का सापेक्ष पथ

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

हम "../../../../../" से बच सकते हैं, यह अजीब लग रहा है और पठनीय भी नहीं है।

इसलिए टाइपस्क्रिप्ट कॉन्फिग फ़ाइल में उसी का उत्तर होता है। बस आधार को निर्दिष्ट करें, कॉन्फ़िगरेशन आपके सापेक्ष पथ का ध्यान रखेगा।

कॉन्फ़िगर करने का तरीका: tsconfig.json फ़ाइल नीचे दिए गए गुण जोड़ें।

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

तो अंत में यह नीचे की तरह दिखेगा

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

यह सरल, भयानक और अधिक पठनीय लगता है।

Answer 9

इसका उपयोग करके संकलक ऑपरेशन की जाँच करें

मैंने नीचे दिए प्रोजेक्ट की तरह फ़ाइल में baseUrl जोड़ा है:

"baseUrl": "src"

यह ठीक काम कर रहा है। इसलिए अपनी परियोजना के लिए अपनी आधार निर्देशिका जोड़ें।

Answer 10

/केवल जड़ से शुरू होता है, रिश्तेदार पथ प्राप्त करने के लिए जिसे हमें उपयोग करना चाहिए ./या../

Comments

सच नहीं। कई विकल्प गैर-सापेक्ष मॉड्यूल आयात के लिए अनुमति देते हैं ।

— नीनो फीलू

Answer 11

ऐसा लगता है कि प्रतिक्रिया के लिए एक अद्यतन किया गया है जो आपको "paths"किसी भी tsconfig.jsonलंबे समय तक सेट करने की अनुमति नहीं देता है ।

अच्छी तरह से प्रतिक्रिया सिर्फ एक चेतावनी आउटपुट:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

फिर आपका अपडेट करता है tsconfig.jsonऔर आपके लिए पूरा "paths"सेक्शन हटा देता है । इस रन को पाने का एक तरीका है

npm run eject

यह सभी create-react-scriptsसेटिंग्स को जोड़कर configऔर scriptsनिर्देशिकाओं को अस्वीकार कर देगा और आपकी परियोजना में फ़ाइलों का निर्माण / विन्यास करेगा। यह सब कुछ कैसे बनाया जाता है, नाम आदि को अद्यतन करके बहुत अधिक नियंत्रण की अनुमति देता है{project}/config/* फ़ाइलों ।

फिर अपना अपडेट करें tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}