Rollup-plugin-typescript2: Résoudre l'alias de chemin dans les fichiers de déclaration (d.ts)

D'après les gens dactylographiés, vous l'utilisez à l'envers :

Notre point de vue général à ce sujet est que vous devez écrire le chemin d'importation qui fonctionne au moment de l'exécution et définir vos indicateurs TS pour satisfaire l'étape de résolution du module du compilateur, plutôt que d'écrire l'importation qui fonctionne immédiatement pour TS, puis d'essayer pour qu'une autre étape "répare" les chemins vers ce qui fonctionne au moment de l'exécution.

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

Actuellement, ce plugin ne publie pas de traitement ni même d'analyse des déclarations de type une fois qu'elles sont émises par dactylographe.

Il est peut-être possible de faire quelque chose de légèrement mieux que rechercher/remplacer, mais pour résoudre ce problème en général, nous devrons essentiellement réimplémenter le cumul pour les déclarations de type (à moins qu'ils aient déjà ajouté une API de service de langue pour générer des déclarations groupées alors que je ne cherchais pas)

Merci pour la réponse. Existe-t-il un crochet « post-émettre » qui fonctionne à la fois sur les modes de surveillance et de construction et qui pourrait être utilisé pour attacher une étape de post-traitement de recherche / remplacement grossière ?

Les fichiers d.ts sont émis directement dans le pipeline de cumul (lorsque l'option useTsconfigDeclarationDir: false est utilisée), vous pouvez donc créer un plugin de cumul qui les transforme.

Ils sont émis lorsque le bundle est écrit, vous devrez donc peut-être utiliser le crochet generateBundle au lieu de transform .

Si ça ne marche pas. Je peux ajouter un crochet de pré-écriture à rpt2 lui-même.

Rencontrez le même problème, trouvé une solution ici
utilise actuellement ttsc avec typescript-transform-paths pour générer des fichiers de déclaration après le cumul des fichiers ts émis, un peu redondant mais fonctionne...

Oui, j'y parviens également en utilisant ttsc. Je n'ai pas pu faire fonctionner les transformateurs directement avec les options rollup-plugin-typescript2 transformers , j'ai donc choisi d'utiliser ttsc

Ma configuration de cumul ressemble à :

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

Merci mec @alshdavid ! Vous m'avez sauvé la vie ! Hier, j'ai eu le même problème et en utilisant typescript-transform-paths je l'ai résolu ! Merci

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

cette solution a fonctionné pour moi dans le passé, mais je trouve maintenant de nombreuses situations où j'obtiens une erreur comme celle-ci :

UnhandledPromiseRejectionWarning : TypeError : Impossible de lire la propriété « texte » d'undefined

si je m'éloigne de l'utilisation des alias (et de ces plugins), cela fonctionne sans problème. Quelqu'un d'autre a ce problème?

cette solution a fonctionné pour moi dans le passé, mais je trouve maintenant de nombreuses situations où j'obtiens une erreur comme celle-ci :

UnhandledPromiseRejectionWarning : TypeError : Impossible de lire la propriété « texte » d'undefined

si je m'éloigne de l'utilisation des alias (et de ces plugins), cela fonctionne sans problème. Quelqu'un d'autre a ce problème?

J'ai la même erreur

cette solution a fonctionné pour moi dans le passé, mais je trouve maintenant de nombreuses situations où j'obtiens une erreur comme celle-ci :

UnhandledPromiseRejectionWarning : TypeError : Impossible de lire la propriété « texte » d'undefined

si je m'éloigne de l'utilisation des alias (et de ces plugins), cela fonctionne sans problème. Quelqu'un d'autre a ce problème?

Salut, je pose le même problème, mais dans un contexte différent : j'utilise rollup pour regrouper une bibliothèque de composants écrite avec Vue et Typescript. Voici le fichier 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 })
    ]
  }
];

J'utilise déjà la commande ttsc --emitDeclarationOnly après celle de rollup --config , afin de résoudre les alias, mais les fichiers .vue.d.ts générés par rollup ne sont pas traités (bien sûr).

Même problème avec ttypescript et typescript-transofrm-paths , ça n'a pas fonctionné :déçu. Lors de l'exécution de la compilation :

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

Mais en utilisant @zerollup/ts-transform-paths et ttypescript ça marche 🎉

Il y a une configuration impressionnante ici : 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": ["*"]
            }
        ]
    }
}

Génial! J'ai résolu d'une manière différente, mais ce n'est pas lié à ce plugin. J'ai supprimé typescript-transform-path et ttypescript et laissé le plugin actuel tel quel (typescript()). J'ai utilisé tsc-alias après le cumul pour résoudre le problème. Il remplace même les fichiers vue car il traite les fichiers .d.ts après leur génération.

J'ai utilisé tsc-alias après le cumul pour résoudre le problème. Il remplace même les fichiers vue car il traite les fichiers .d.ts après leur génération.

@mantlebee Cela vous dérange- tsconfig.json ainsi que votre configuration de cumul ?

Mais en utilisant @zerollup/ts-transform-paths et ttypescript ça marche 🎉

@luanorlandi ne fonctionne pas ts-transform-path à l'exécution ? Probablement pas une bonne idée pour le code de bibliothèque.

J'ai utilisé tsc-alias après le cumul pour résoudre le problème. Il remplace même les fichiers vue car il traite les fichiers .d.ts après leur génération.

@mantlebee Cela vous dérange- tsconfig.json ainsi que votre configuration de cumul ?

Les propriétés importantes sont declaration , declarationDir et 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"
  ]
}

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

Ensuite, j'ai tout mis dans la commande prepublishOnly (juste parce que ça m'est utile)

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

TSC-ALIAS effectuera le remplacement dans le dossier dist/src ; J'ai choisi de tout mettre dedans car ts-alias remplacera les alias pensant être dans le dossier src.

Ce n'est pas une conclusion optimale, mais ça marche. Je vais vérifier la solution de que possible.

Bien sûr, toutes les autres bibliothèques doivent être configurées pour éviter le dossier dist/src , comme jest

Mais en utilisant @zerollup/ts-transform-paths et ttypescript ça marche 🎉

@luanorlandi ne fonctionne pas ts-transform-path à l'exécution ? Probablement pas une bonne idée pour le code de bibliothèque.

Je ne pense pas, le transformateur est juste pour l'étape de construction, comme la bibliothèque le décrit :

_...tsconfig baseUrl + réécriture des alias des chemins dans les bundles et les fichiers de déclaration. Tous seront réécrits en relatif dans les fichiers js transpilés et dans les fichiers d.ts._

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