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

— Patrik Forsberg

Answer 1

এটি আপনার টিএসকনফিগ.জসন ফাইলটিতে সেট আপ করা যেতে পারে কারণ এটি টিএস বৈশিষ্ট্য feature

আপনি এটির মতো করতে পারেন:

"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 মডিউলটির প্রয়োজন হবে

— রেমো এইচ। জানসেন

@ আলেজান্দ্রো লোরা আমি এই প্রকল্পটি আমার প্রকল্পে ব্যবহার করেছি এটি মনোযোগের মতো কাজ করে তবে আমি যখন এনজি টেস্ট কর্ম চালাই তবে পরিবেশের পরিবর্তনগুলি সমাধান করতে সক্ষম হয় না। কারণ কি হতে পারে?

— গাভিশিদ্দ্পা গাদাগি

এটি সম্পূর্ণ সূক্ষ্মভাবে কাজ করে তবে ঘোষণাটি সক্ষম করুন এবং অন্য মডিউলে এই এনপিএম মডিউলটি আমদানি করার সময় একটি সমস্যা আছে। ইন্টেলিসেন্স বিরতি। এই সমস্যাটি কীভাবে সমাধান করবেন সে সম্পর্কে কোনও ধারণা?

— শিভা

@ আফ্যাক্স হ্যাঁ একটি একক ফাইলে মানচিত্র করা সম্ভব, আমি এখানে একটি উদাহরণ প্রস্তুত করেছি: github.com/ialex90/TypeScript- নোড- স্টার্টার

— আলেজান্দ্রো লোরা

মনে রাখবেন যে জাস্ট-টেস্টটি tsconfig- পাথগুলি ব্যবহার করে না - আপনাকে একটি সংজ্ঞা দেওয়া দরকার moduleNameMapper: tsjest # 414

— টিএমট্রন

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- পাথ হয়েছে ।

আমি এটি চেষ্টা করেছি, তবে এটি আমার জটিল সেটআপের জন্য কার্যকর হয়নি। এছাড়াও, এটি রান-টাইমে পাথগুলি সমাধান করে, অর্থাত আপনার প্যাকেজ আকারের ওভারহেডের অর্থ এবং কার্য সম্পাদনের সমাধান।

সুতরাং, আমি নিজেই একটি সমাধান লিখেছি, 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 } */)
    ]
}

টাইপস্ক্রিপ্ট ২.০ এ উন্নত পাথ রেজোলিউশন

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": "src"

এটা ঠিক কাজ করছে। সুতরাং আপনার প্রকল্পের জন্য আপনার বেস ডিরেক্টরি যুক্ত করুন।

Answer 10

/রুট থেকে শুরু শুধুমাত্র আপেক্ষিক পাথ আমরা ব্যবহার করা উচিত পেতে ./বা../

Comments

সত্য না. অনেকগুলি বিকল্প আপেক্ষিক মডিউল আমদানির জন্য অনুমতি দেয় ।

— নিনো ফিলিউ

Answer 11

দেখে মনে হচ্ছে সেখানে প্রতিক্রিয়া যে আপনাকে সেট করার অনুমতি দেয় না একটি আপডেট হয়েছে "paths"এ tsconfig.jsonanylonger।

সুন্দরভাবে প্রতিক্রিয়া কেবল একটি সতর্কতা প্রকাশ করে:

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