Подтвердить что ты не робот

TypeScript Псевдоним пути импорта

В настоящее время я работаю над приложением TypeScript, состоящим из нескольких модулей Node, написанных в TypeScript, которые установлены в каталог node_modules.

Прежде чем продолжить, я хотел бы отметить, что я использую TypeScript 2.0, я не против использования версии 2.1 dev, если это необходимо. Я просто хочу, чтобы это работало.

Структура каждого модуля Node - это что-то вроде строк:

dist/
    es2015/
        index.js
        utils/
            Calculator.js
            Calculator.d.ts
            Date.js
            Date.d.ts
            Flatpack.js
            Flatpack.d.ts
src/
    index.ts
    utils/
        Calculator.ts
        Date.ts
        Flatpack.ts

Папка dist - это сгенерированный источник, этот путь настраивается с помощью outDir внутри моего файла tsconfig.json. Я также настроил свойство main в моем package.json как dist/es2015/index.js.

Важно отметить:

  • В моем проекте я использую moduleResolution тип node
  • Я использую TypeScript 2.0
  • Я не спрашиваю, как импортировать файл из пакета. Я устанавливаю пакет через Npm, а затем импортирую его через packagename/ из приложения, использующего этот модуль.

Теперь мой вопрос/вопрос. При импорте файлов из этого модуля я хотел бы иметь возможность сделать это:

import {Sin, Cos, Tan} from "common-utils/utils/Calculator";

Однако файл не может быть разрешен в каталоге dist/es2015/utils. В идеале я хотел бы, чтобы мой импорт разрешался из этой конкретной папки dist, а не из корня, что, как представляется, происходит.

Вышеприведенный импорт должен быть записан следующим образом, чтобы заставить его работать:

import {Sin, Cos, Tan} from "common-utils/dist/es2015/utils/Calculator";

Однако запись dist/es2015 каждый раз не идеальна, и это просто заставляет некоторые из них выглядеть очень долго. Есть ли способ настроить мой модуль для решения в каталоге dist/es2015? Я не хочу включать переопределения внутри моего проекта, в идеале каждый модуль будет определять, от каких файлов решаются.

Если вы все еще не знаете, что я прошу (и я извиняюсь, если это запутывает) в Jspm, когда вы создаете плагин/модуль для использования с Jspm, вы можете указать внутри package.json для модуля что-то вроде следующее:

  "jspm": {
    "registry": "npm",
    "jspmPackage": true,
    "main": "my-module",
    "format": "amd",
    "directories": {
      "dist": "dist/amd"
    },

Я ищу эквивалент выше в TypeScript (если он существует). Директива сопоставления, поэтому, когда конечный пользователь запускает npm install my-cool-package, а затем в своем приложении пытается что-то импортировать, все импорт по умолчанию разрешается в каталог commonjs (в приведенном выше примере для Jspm используется amd, но такая же предпосылка).

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

4b9b3361

ОТВЕТЫ

Ответ 1

Итак, прочитав ваш комментарий, я понял, что неправильно понял ваш вопрос! Если вы хотите управлять путями с точки зрения импортированного пакета, просто используйте свойство main вашего package.json для файла, который правильно представляет граф объектов вашего модуля.

{
  "main": "common-utils/dist/es2015/index.js"
}

Если вы пытаетесь контролировать пути импорта с точки зрения проекта, то вы ищете TypeScript 2 новые возможности сопоставления пути для разрешения модуля. Вы можете включить отображение пути, настроив tsconfig.json следующим образом:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "angular2/*": ["../path/to/angular2/*"],
      "local/*": ["../path/to/local/modules/*"]
    }
  }
}

Затем в ваших файлах TypeScript вы можете импортировать модули следующим образом:

import { bootstrap } from 'angular2/bootstrap';
import { module } from 'local/module';

Подробнее о функции сопоставления путей в TypeScript 2 см. эту проблему Github.

В вашем случае, я думаю, что следующая конфигурация должна работать:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
    }
  }
}

Ответ 2

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

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

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

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

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

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

Ответ 3

Это сбивает с толку меня, что псевдонимы не разрешаются после компиляции tsc. Построение библиотеки в tsc не работает из-за этого.