Как использовать пути в tsconfig.json?

Я читал о пути картирования в tsconfig.jsonи я хотел бы использовать его , чтобы избежать , используя следующие уродливые пути:

Организация проекта немного странная, потому что у нас есть моно-репозиторий, содержащий проекты и библиотеки. Проекты сгруппированы по компаниям и по браузеру / серверу / универсальному.

Как я могу настроить пути tsconfig.jsonтак вместо:

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

Я могу использовать:

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

Нужно ли что-то еще в конфигурации веб-пакета? или 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 документы .

Предполагая, что root находится в самом верхнем 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с webpack 4, мне также пришлось добавить в tsconfig-paths-webpack-pluginмой файл webpack.config, чтобы он разрешался правильно

Если вы используете пути, вам нужно изменить абсолютные пути на относительные пути, чтобы он работал после компиляции машинописи в простой javascript с использованием tsc.

Самое популярное решение для этого было tsconfig-pathsДо сих пор .

Я попробовал это, но у меня не получилось для моей сложной настройки. Кроме того, он разрешает пути во время выполнения, то есть накладные расходы с точки зрения размера вашего пакета и разрешения производительности.

Итак, я сам написал решение, tscpaths .

Я бы сказал, что лучше в целом, потому что он заменяет пути во время компиляции. Это означает, что нет зависимости во время выполнения или каких-либо накладных расходов. Это довольно просто в использовании. Вам просто нужно добавить строку в ваши скрипты сборки в package.json.

Проект довольно молодой, поэтому могут возникнуть некоторые проблемы, если ваши настройки очень сложны. Это работает безупречно для моей установки, хотя моя установка довольно сложна.

если используется typescript + 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, config позаботится о вашем относительном пути.

Способ настройки: в файле tsconfig.json добавьте следующие свойства.

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

Итак, наконец, это будет выглядеть ниже

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

Выглядит просто, потрясающе и более читабельно.

Оформить работу компилятора, используя это

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

"baseUrl": "src"

Работает нормально. Так что добавьте ваш базовый каталог для вашего проекта.

/начинается только с корня, чтобы получить относительный путь, который мы должны использовать ./или../

Похоже, что было обновлено React, которое не позволяет вам устанавливать "paths"в tsconfig.jsonanylonger.

Приятно 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каталоги, и файлы build / config в ваш проект. Это также дает гораздо больший контроль над тем, как все построено, названо и т. Д. Путем обновления{project}/config/* файлов.

Затем обновите свой tsconfig.json

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