تایپاسکریپت - مسیرهای نسبی برای واردات SystemJS و ماژول ES

من در وارد کردن کامپوننتهای Angular2 هنگام استفاده از SystemJS و سینتکس import در ES مشکل دارم.

ساختار پروژه:

ROOT
|_src
  |_client
    |_app
      |_frameworks
        |_il8n
        |_analytics
      |_main
        |_components
        |_pages
        |_utility

فرض کنیم من یک فایل دارم: ROOT/src/client/app/frameworks/il8n/language-service.ts و یک فایل دیگر: ROOT/src/client/app/main/pages/login/login.ts. در login.ts میخواهم language.ts را وارد کنم، بنابراین یک روش برای این کار به این صورت است:

//login.ts وارد کردن { LanguageService } از '../../../../frameworks/il8n/language-service';

راه دیگر انجام این کار، با استفاده از بشکهها، به این صورت است:

//login.ts وارد کردن { LanguageService } از '../../../../frameworks/index';

جایی که frameworks/index.ts در حال انجام export * from './il8n/language-service'; است

من نمیخواهم هر بار که نیاز به وارد کردن چیزی دارم، ../../../ و غیره را تایپ کنم؛ خوب است اگر بتوانم فقط این کار را انجام دهم: import { LanguageService } from 'frameworks';

تا کنون، توانستهام فرآیند ساخت خود را با استفاده از گزینه «map» در SystemJS به این صورت راهاندازی کنم:

map: {
      frameworks: 'src/client/app/frameworks/index',
      components: 'src/client/app/main/components/index',
      pages: 'src/client/app/main/pages/index'
    }

با این حال، IDE من شکایت میکند (تمام قابلیتهای IntelliSense کاملاً خراب شدهاند) هر زمان که کاری مانند این انجام میدهم:

`import { LanguageService } from 'frameworks';`

این فایل tsconfig.json من است:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "pretty": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitUseStrict": false,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": "./src",
        "paths": {
            "frameworks": ["client/app/frameworks"],
            "components": ["client/app/main/components"],
            "pages": ["client/app/main/pages"],
            "utility": ["client/app/main/utility"]
        }
    },
    "compileOnSave": false
}

آیا راهی وجود دارد که هم IDE من و هم پیکربندی ساخت SystemJS راضی شوند تا بتوانم واردات «ساده» انجام دهم؟

پاسخ شماره ۱

پس، این سوال بر اساس مخزن Angular2 Seed (Advanced) که در اینجا یافت میشود، بود. من همچنین یک مسئله آنجا ارسال کردم (که میتوانید اصلاح دقیق را ببینید). داستان کوتاه:

برای استفاده از گزینههای paths و baseUrl در فایل tsconfig خود، به TypeScript 2.0 نیاز دارید. سپس در فایل پیکربندی SystemJS خود، باید مقداری پیکربندی به گزینههای paths و packages به صورت زیر اضافه کنید:

packages: {
  ...
  frameworks: { defaultExtension: js, main: index.js }
  ...
},
paths: {
  ...
  frameworks: 'relative/path/to/frameworks/folder'
  ...
}

index.ts یک فایل درون پوشه frameworks شما است که ماژولهای آن دایرکتوری را صادر میکند. به عنوان مثال، اگر یک فایل language.component.ts در جایی از دایرکتوری frameworks خود داشتید، در فایل frameworks/index.ts شما این کار را انجام میدهید:

export * از 'path/to/language.component'؛.

این به شما اجازه میدهد تا import {LanguageComponent} from 'frameworks'; را در پروژه خود انجام دهید (تا زمانی که خارج از دایرکتوری frameworks باشید).

امیدوارم این کمک کند!