Як використовувати шляхи в tsconfig.json?

Я читав про шляхи картування в tsconfig.jsonі я хотів би використовувати його , щоб уникнути , використовуючи такі потворні шляху:

Організація проекту трохи дивна, оскільки у нас є монорепозиторій, який містить проекти та бібліотеки. Проекти групуються по компанії та за браузером / сервером / універсальним.

Як я можу налаштувати шляхи tsconfig.jsonтак, а не:

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

Я можу використовувати:

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

Чи буде потрібно щось інше в конфігурації webpack? чи tsconfig.jsonдостатньо?

Це можна встановити у вашому файлі 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/*"]
        },
        ...

Майте на увазі, що шлях, на який ви хочете посилатися, приймає ваш baseUrl як основу маршруту, на який ви вказуєте, і обов'язковий, як описано в документі.

Символ "@" не є обов'язковим.

Після того як ви налаштуєте його таким чином, ви можете легко використовувати його так:

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

Єдине, що ви можете помітити, це те, що intellisense не працює в останній останній версії, тому я б запропонував дотримуватися конвенції щодо імпорту / експорту файлів.

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

Ви можете використовувати комбінації 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'
        ]
    }
}

Перевірте подібні рішення зірочкою

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

Відповідь Alejandros працював на мене, але, оскільки я використовую веб- awesome-typescript-loaderпакет 4, мені також довелося додати tsconfig-paths-webpack-pluginфайл до свого webpack.config, щоб він міг правильно вирішити

Якщо ви використовуєте шляхи, вам знадобиться змінити абсолютні шляхи на відносні шляхи, щоб він працював після компіляції машинопису в звичайний JavaScript tsc.

Найпопулярнішим рішенням для цього досі були tsconfig-paths .

Я спробував це, але це не спрацювало для моєї складної установки. Крім того, він вирішує шляхи під час виконання, тобто накладні витрати з точки зору розміру вашого пакета та ефективності роботи.

Отже, я написав рішення сам, tscpaths .

Я б сказав, що це краще в цілому, оскільки він замінює шляхи під час компіляції. Це означає, що немає залежності від часу виконання або будь-якого режиму продуктивності. Це досить просто у використанні. Вам просто потрібно додати рядок до сценаріїв побудови package.json.

Проект досить молодий, тому можуть виникнути певні проблеми, якщо ваша установка дуже складна. Він працює бездоганно для моєї установки, хоча моя установка досить складна.

якщо використовується typecript + webpack 2 + at-loader, є додатковий крок (@ рішення 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 } */)
    ]
}

Розширена роздільна здатність шляху в TypeScript 2.0

Це працює для мене:

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

Переконайтеся, що у вас є і baseUrl, і шляхи для цього

І тоді ви можете імпортувати, як:

import {AlarmIcon} from 'assets/icons'

Його вид відносного шляху Замість наведеного нижче коду

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

Ми можемо уникати "../../../../../" його вигляду дивним і нечитабельним.

Отже, конфігураційний файл Typescript має відповідь за те саме. Просто вкажіть baseUrl, конфігурація подбає про ваш відносний шлях.

спосіб налаштування: файл tsconfig.json додайте нижче наведені властивості.

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

Отже, нарешті, це буде виглядати нижче

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

Це виглядає просто, дивовижно і читабельніше ..

Отримайте операцію компілятора за допомогою цього

Я додав baseUrl у файл для проекту, як показано нижче:

"baseUrl": "src"

Це прекрасно працює. Тому додайте базовий каталог для свого проекту.

/починається лише з кореня, щоб отримати відносний шлях, який ми повинні використовувати ./або../

Схоже, відбулось оновлення React, яке не дозволяє встановлювати значення "paths"в більш tsconfig.jsonдовгий час.

Nicely React просто видає попередження:

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