Rollup-plugin-typescript2: Разрешить псевдоним пути в файлах объявлений (d.ts)

Созданный на 1 янв. 2020  ·  16Комментарии  ·  Источник: ezolenko/rollup-plugin-typescript2

При применении псевдонима пути к проекту машинописного текста путь разрешается в генерируемых файлах javascript, но не в файлах объявления.

Команда TypeScript прямо заявила, что разрешение пути не входит в состав компилятора (когда-либо) и является областью таких утилит, как rollup / webpack.

Версии

  • машинопись: 3.7.4
  • накопительный пакет: 1.27.14
  • свертка-плагин-машинописный текст2: 0.25.3

В следующем проекте я присвоил ~/* псевдониму ./src/* . Разрешение импорта с использованием абсолютных путей из базового каталога.

https://github.com/alshdavid-sandbox/rollup-typescript-library

npm install && make
cat dist/a/index.d.ts | grep "~"

cat должен ничего печатать, однако в настоящее время он печатает

import { B } from '~/b';

Это показывает, что мы не применяем разрешение пути к файлам объявлений.

bug controversial enhancement help wanted

Самый полезный комментарий

Да, я тоже добиваюсь этого с помощью ttsc. Мне не удалось заставить трансформаторы работать напрямую с параметрами rollup-plugin-typescript2 transformers , поэтому я решил использовать ttsc

Моя конфигурация накопительного пакета выглядит так:

import typescript from 'rollup-plugin-typescript2'

export default {
  input: `src/index.ts`,
  preserveModules: true,
  output: {
    format: 'esm',
    dir: './dist'
  },
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    typescript({ 
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
          ]
        }
      }
    }),
  ],
}

Все 16 Комментарий

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

Наш общий подход к этому заключается в том, что вы должны написать путь импорта, который работает во время выполнения, и установить флаги TS, чтобы удовлетворить шагу разрешения модуля компилятора, вместо того, чтобы писать импорт, который работает из коробки для TS, а затем пытаться чтобы иметь какой-то другой шаг "исправить" пути к тому, что работает во время выполнения.

https://github.com/microsoft/TypeScript/issues/15479

В настоящее время этот плагин не публикует процесс и даже не анализирует объявления типов после их отправки с помощью машинописного текста.

Возможно, можно было бы сделать что-то немного лучше, чем поиск / замена, но для решения этой проблемы в целом нам в основном потребуется переопределить свертку для объявлений типов (если они уже не добавили API языковой службы для создания объединенных объявлений, пока я не смотрел)

Спасибо за ответ. Есть ли хук "post emit", который работает как в режиме просмотра, так и в режиме сборки, который можно использовать для присоединения грубого шага пост-обработки поиска / замены?

Файлы d.ts отправляются непосредственно в конвейер объединения (при использовании параметра useTsconfigDeclarationDir: false ), поэтому вы можете создать подключаемый модуль объединения, который их преобразует.

Однако они генерируются при написании пакета, поэтому вам, возможно, придется использовать generateBundle hook вместо transform .

Если это не сработает. Я могу добавить ловушку предварительной записи к самому rpt2.

Encounter тот же вопрос, нашел Walkaround здесь
в настоящее время используется ttsc с typescript-transform-paths для создания файлов декларации после того, как свертка выпустила файлы ts, что-то вроде избыточного, но работает ...

Да, я тоже добиваюсь этого с помощью ttsc. Мне не удалось заставить трансформаторы работать напрямую с параметрами rollup-plugin-typescript2 transformers , поэтому я решил использовать ttsc

Моя конфигурация накопительного пакета выглядит так:

import typescript from 'rollup-plugin-typescript2'

export default {
  input: `src/index.ts`,
  preserveModules: true,
  output: {
    format: 'esm',
    dir: './dist'
  },
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    typescript({ 
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
          ]
        }
      }
    }),
  ],
}

Спасибо, чувак @alshdavid ! Ты спас мне жизнь! Вчера у меня была такая же проблема, и я решил ее с помощью typescript-transform-paths ! Спасибо 💪

// webpack.config.js
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              compiler: 'ttypescript',
            },
          },
          {
            loader: require.resolve('react-docgen-typescript-loader'),
          },
        ],
        exclude: /(node_modules)/,
      },
    ],
  },
// tsconfig.json
compilerOptions: {
  "plugins": [
     { "transform": "typescript-transform-paths" },
     { "transform": "typescript-transform-paths", "afterDeclarations": true }
   ]
}

это решение работало для меня в прошлом, но сейчас я нахожу много ситуаций, когда я получаю такую ​​ошибку:

UnhandledPromiseRejectionWarning: TypeError: невозможно прочитать текст свойства undefined

если я откажусь от использования псевдонимов (и этих плагинов), он будет работать без проблем. У кого-нибудь еще есть эта проблема?

это решение работало для меня в прошлом, но сейчас я нахожу много ситуаций, когда я получаю такую ​​ошибку:

UnhandledPromiseRejectionWarning: TypeError: невозможно прочитать текст свойства undefined

если я откажусь от использования псевдонимов (и этих плагинов), он будет работать без проблем. У кого-нибудь еще есть эта проблема?

У меня такая же ошибка

это решение работало для меня в прошлом, но сейчас я нахожу много ситуаций, когда я получаю такую ​​ошибку:

UnhandledPromiseRejectionWarning: TypeError: невозможно прочитать текст свойства undefined

если я откажусь от использования псевдонимов (и этих плагинов), он будет работать без проблем. У кого-нибудь еще есть эта проблема?

Привет, у меня та же проблема, но в другом контексте: я использую накопительный пакет для объединения библиотеки компонентов, написанной с помощью Vue и Typescript. Это файл rollup.config.js :

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import css from "rollup-plugin-css-only";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "./src/index.ts",
    preserveModules: true,
    output: {
      format: "esm",
      dist: "./dist"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "./src/") }
      }),
      css({ output: "dist/bundle.css" }),
      scss(),
      typescript({
        typescript: require("ttypescript"),
        tsconfigDefaults: {
          compilerOptions: {
            plugins: [
              { transform: "typescript-transform-paths" },
              {
                transform: "typescript-transform-paths",
                afterDeclarations: true
              }
            ]
          }
        }
      }),
      vue({ css: false })
    ]
  }
];

Я уже использую команду ttsc --emitDeclarationOnly после rollup --config one, чтобы разрешить псевдонимы, но файлы .vue.d.ts созданные с помощью объединения, не обрабатываются (конечно).

Та же проблема с ttypescript и typescript-transofrm-paths , это не сработало: разочарован. При запуске сборки:

[!] (plugin rpt2) TypeError: Cannot read property 'text' of undefined

Но при использовании @zerollup/ts-transform-paths и ttypescript это работает 🎉

Здесь есть отличная настройка: https://www.npmjs.com/package/@zerollup/ts -transform-paths # setup-for-rollup-plugin-typescript2

_rollup.config.js_

import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/lib.ts',
    output: [{ file : 'dist/lib.js', name : 'mylib', format : 'iife', sourcemap : true }],
    plugins: [
        tsPlugin({
            typescript: ttypescript
        })
    ]
}

_tsconfig.json_

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "my-lib/*": ["src/*"]
        },
        "plugins": [
            {
                "transform": "@zerollup/ts-transform-paths",
                "exclude": ["*"]
            }
        ]
    }
}

Большой! Решил по-другому, но к этому плагину он не имеет отношения. Я удалил typescript-transform-path и ttypescript и оставил текущий плагин как есть (typescript ()). Я использовал tsc-alias после объединения для решения проблемы. Он заменяет даже файлы vue, поскольку обрабатывает файлы .d.ts после их создания.

Я использовал tsc-alias после объединения для решения проблемы. Он заменяет даже файлы vue, поскольку обрабатывает файлы .d.ts после их создания.

@mantlebee Не могли бы вы опубликовать пример своего tsconfig.json а также конфигурации накопительного пакета?

Но при использовании @zerollup/ts-transform-paths и ttypescript это работает 🎉

@luanorlandi не ts-transform-path работа во время выполнения? Вероятно, не лучшая идея для библиотечного кода.

Я использовал tsc-alias после объединения для решения проблемы. Он заменяет даже файлы vue, поскольку обрабатывает файлы .d.ts после их создания.

@mantlebee Не могли бы вы опубликовать пример своего tsconfig.json а также конфигурации накопительного пакета?

Важные свойства: declaration , declarationDir и outDir

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist/src",
    "baseUrl": ".",
    "outDir": "dist/src",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Простой rollup.config.js файл

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "src/index.ts",
    output: {
      format: "esm",
      file: "dist/elegere-ui.js"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "src/") }
      }),
      scss(),
      typescript({
        useTsconfigDeclarationDir: true
      }),
      vue()
      //{ css: false }
    ]
  }
];

Затем я помещаю все в команду prepublishOnly (просто потому, что это полезно для меня)

"prepublishOnly": "npm run rollup && tsc-alias && npm run docs"

TSC-ALIAS выполнит замену внутри папки dist/src ; Я решил поместить все в это, потому что ts-alias заменит псевдонимы, думающие, что они находятся внутри папки src.

Не лучший вывод, но работает. Я проверю решение на @luanorlandi как можно скорее.

Конечно, все остальные библиотеки должны быть настроены так, чтобы избегать папки dist/src , например jest

Но при использовании @zerollup/ts-transform-paths и ttypescript это работает 🎉

@luanorlandi не ts-transform-path работа во время выполнения? Вероятно, не лучшая идея для библиотечного кода.

Я так не думаю, трансформатор предназначен только для этапа сборки, как его описывает библиотека:

_... tsconfig baseUrl + переопределение псевдонимов путей в пакетах и ​​файлах объявлений. Все они будут переписаны в относительные в транспилированных js и d.ts файлах.

https://www.npmjs.com/package/@zerollup/ts -transform-paths

Была ли эта страница полезной?
0 / 5 - 0 рейтинги