Rollup-plugin-typescript2: Pfadalias in Deklarationsdateien (d.ts) auflösen

Laut Typoskript-Leute verwenden Sie es rückwärts:

Unsere allgemeine Meinung dazu ist, dass Sie den Importpfad schreiben sollten, der zur Laufzeit funktioniert, und Ihre TS-Flags so setzen, dass sie den Modulauflösungsschritt des Compilers erfüllen, anstatt den Import zu schreiben, der für TS standardmäßig funktioniert, und es dann zu versuchen einen anderen Schritt zu haben, um die Pfade zu dem zu "korrigieren", was zur Laufzeit funktioniert.

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

Derzeit verarbeitet dieses Plugin keine Typdeklarationen nach und analysiert sie nicht einmal, sobald sie von Typskript ausgegeben wurden.

Es könnte möglich sein, etwas Besseres als Suchen/Ersetzen zu tun, aber um dies im Allgemeinen zu lösen, müssen wir das Rollup für Typdeklarationen grundsätzlich neu implementieren (es sei denn, sie haben bereits die Sprachdienst-API zum Generieren gebündelter Deklarationen hinzugefügt, während ich nicht gesucht habe).

Danke für die Antwort. Gibt es einen "Post-Emit" -Hook, der sowohl im Watch- als auch im Build-Modus ausgeführt wird und mit dem ein grober Such- / Ersetzungs-Nachbearbeitungsschritt angehängt werden könnte?

d.ts-Dateien werden direkt in die Rollup-Pipeline ausgegeben (wenn die Option useTsconfigDeclarationDir: false verwendet wird), sodass Sie ein Rollup-Plugin erstellen können, das sie transformiert.

Sie werden jedoch ausgegeben, wenn Bundle geschrieben wird, sodass Sie möglicherweise den Hook generateBundle anstelle von transform .

Wenn das nicht geht. Ich kann rpt2 selbst einen Pre-Write-Hook hinzufügen.

Begegnung mit dem gleichen Problem, fand eine Walkaround hier
Derzeit wird ttsc mit typescript-transform-paths , um Deklarationsdateien zu generieren, nachdem ts-Dateien vom Rollup ausgegeben wurden, irgendwie redundant, aber funktioniert ...

Ja, ich erreiche dies auch mit ttsc. Ich konnte die Transformer nicht direkt mit den Optionen rollup-plugin-typescript2 transformers Laufen bringen, also habe ich mich für ttsc

Meine Rollup-Konfiguration sieht so aus:

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 }
          ]
        }
      }
    }),
  ],
}

Danke, Mann @alshdavid ! Du hast mein Leben gerettet! Gestern hatte ich das gleiche Problem und mit typescript-transform-paths ich es gelöst! Danke 💪

// 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 }
   ]
}

Diese Lösung hat in der Vergangenheit für mich funktioniert, aber ich finde jetzt viele Situationen, in denen ich einen Fehler wie diesen erhalte:

UnhandledPromiseRejectionWarning: TypeError: Eigenschaft 'Text' von undefined kann nicht gelesen werden

Wenn ich mich von der Verwendung von Aliasen (und diesen Plugins) entferne, funktioniert es ohne Probleme. Hat noch jemand dieses Problem?

Diese Lösung hat in der Vergangenheit für mich funktioniert, aber ich finde jetzt viele Situationen, in denen ich einen Fehler wie diesen erhalte:

UnhandledPromiseRejectionWarning: TypeError: Eigenschaft 'Text' von undefined kann nicht gelesen werden

Wenn ich mich von der Verwendung von Aliasen (und diesen Plugins) entferne, funktioniert es ohne Probleme. Hat noch jemand dieses Problem?

Ich habe den gleichen Fehler

Diese Lösung hat in der Vergangenheit für mich funktioniert, aber ich finde jetzt viele Situationen, in denen ich einen Fehler wie diesen erhalte:

UnhandledPromiseRejectionWarning: TypeError: Eigenschaft 'Text' von undefined kann nicht gelesen werden

Wenn ich mich von der Verwendung von Aliasen (und diesen Plugins) entferne, funktioniert es ohne Probleme. Hat noch jemand dieses Problem?

Hallo, ich habe das gleiche Problem, aber in einem anderen Kontext: Ich verwende Rollup, um eine mit Vue und Typescript geschriebene Komponentenbibliothek zu bündeln. Dies ist die rollup.config.js Datei:

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 })
    ]
  }
];

Ich verwende bereits den ttsc --emitDeclarationOnly Befehl nach dem rollup --config -Befehl, um Aliase aufzulösen, aber .vue.d.ts Dateien, die durch Rollup generiert werden, werden (natürlich) nicht verarbeitet.

Gleiches Problem mit ttypescript und typescript-transofrm-paths , es hat nicht funktioniert: enttäuscht. Beim Ausführen von Build:

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

Aber mit @zerollup/ts-transform-paths und ttypescript funktioniert es

Hier gibt es ein tolles Setup: 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": ["*"]
            }
        ]
    }
}

Groß! Ich habe es anders gelöst, aber es hat nichts mit diesem Plugin zu tun. Ich habe typescript-transform-path und ttypescript entfernt und das aktuelle Plugin unverändert belassen (typescript()). Ich habe nach dem Rollup tsc-alias verwendet, um das Problem zu lösen. Es ersetzt sogar vue-Dateien, da es .d.ts-Dateien nach ihrer Generierung verarbeitet.

Ich habe tsc-alias nach dem Rollup verwendet, um das Problem zu lösen. Es ersetzt sogar vue-Dateien, da es .d.ts-Dateien nach ihrer Generierung verarbeitet.

@mantlebee Macht es Ihnen etwas aus, ein Beispiel für Ihre tsconfig.json sowie Ihre Rollup-Konfiguration zu posten?

Aber mit @zerollup/ts-transform-paths und ttypescript funktioniert es

@luanorlandi ts-transform-path funktioniert nicht zur Laufzeit? Wahrscheinlich keine gute Idee für Bibliothekscode.

Ich habe tsc-alias nach dem Rollup verwendet, um das Problem zu lösen. Es ersetzt sogar vue-Dateien, da es .d.ts-Dateien nach ihrer Generierung verarbeitet.

@mantlebee Macht es Ihnen etwas aus, ein Beispiel für Ihre tsconfig.json sowie Ihre Rollup-Konfiguration zu posten?

Wichtige Eigenschaften sind declaration , declarationDir und 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"
  ]
}

Einfache rollup.config.js Datei

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 }
    ]
  }
];

Dann gebe ich alles in den prepublishOnly Befehl (nur weil es für mich nützlich ist)

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

TSC-ALIAS führt das Ersetzen im Ordner dist/src ; Ich entscheide mich, alles darin abzulegen, weil ts-alias Aliasse ersetzt, die denken, dass sie sich im src-Ordner befinden.

Keine optimale Schlussfolgerung, aber es funktioniert. Ich werde die Lösung von @luanorlandi so schnell wie möglich überprüfen .

Natürlich muss jede andere Bibliothek so konfiguriert werden, dass sie den Ordner dist/src wie jest vermeidet

Aber mit @zerollup/ts-transform-paths und ttypescript funktioniert es

@luanorlandi ts-transform-path funktioniert nicht zur Laufzeit? Wahrscheinlich keine gute Idee für Bibliothekscode.

Ich glaube nicht, der Transformator ist nur für den Build-Schritt gedacht, wie die Bibliothek es beschreibt:

_...tsconfig baseUrl + Pfad-Alias-Umschreibung in Bundles und Deklarationsdateien. Alle werden in transpilierten js- und in d.ts-Dateien in relative umgeschrieben._

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