Rollup-plugin-typescript2: Resolver alias de ruta en archivos de declaración (d.ts)

Creado en 1 ene. 2020  ·  16Comentarios  ·  Fuente: ezolenko/rollup-plugin-typescript2

Al aplicar un alias de ruta a un proyecto mecanografiado, la ruta se resuelve en los archivos javascript emitidos, pero no en los archivos de declaración.

El equipo de TypeScript ha declarado explícitamente que la resolución de la ruta no es algo que se incluirá en el compilador (nunca) y es el dominio de utilidades como rollup / webpack.

Versiones

  • mecanografiado: 3.7.4
  • resumen: 1.27.14
  • rollup-plugin-typescript2: 0.25.3

En el siguiente proyecto, he asignado ~/* alias de ./src/* . Permitir importaciones utilizando rutas absolutas desde el directorio base.

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

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

cat debería imprimir nada, sin embargo, actualmente imprime

import { B } from '~/b';

Esto ilustra que no estamos aplicando resolución de ruta a los archivos de declaración.

bug controversial enhancement help wanted

Comentario más útil

Sí, también lo estoy logrando usando ttsc. No pude hacer que los transformadores funcionaran directamente con las opciones rollup-plugin-typescript2 transformers , así que opté por usar ttsc

Mi configuración acumulada se ve así:

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

Todos 16 comentarios

Según la gente mecanografiada, lo estás usando al revés:

Nuestra opinión general sobre esto es que debe escribir la ruta de importación que funciona en tiempo de ejecución y configurar sus indicadores TS para satisfacer el paso de resolución del módulo del compilador, en lugar de escribir la importación que funciona de manera inmediata para TS y luego intentar para tener algún otro paso "arreglar" las rutas a lo que funciona en tiempo de ejecución.

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

Actualmente, este complemento no procesa ni analiza declaraciones de tipo una vez que las emite el mecanografiado.

Podría ser posible hacer algo un poco mejor que buscar / reemplazar, pero para resolver esto en general, básicamente necesitaremos volver a implementar el resumen para las declaraciones de tipo (a menos que ya hayan agregado la API del servicio de lenguaje para generar declaraciones agrupadas mientras no estaba mirando)

Gracias por la respuesta. ¿Existe un gancho de "emisión posterior" que se ejecute tanto en el modo de visualización como en el de construcción que podría usarse para adjuntar un paso de procesamiento posterior de búsqueda / reemplazo?

Los archivos d.ts se emiten directamente a la canalización acumulada (cuando se usa la opción useTsconfigDeclarationDir: false ), por lo que podría crear un complemento acumulativo que los transforme.

Sin embargo, se emiten cuando se escribe el paquete, por lo que es posible que deba usar generateBundle hook en lugar de transform .

Si eso no funciona. Puedo agregar un gancho de preescritura a rpt2.

Encuentro el mismo problema, encontré un recorrido aquí
actualmente usando ttsc con typescript-transform-paths para generar archivos de declaración después de que el resumen emitió archivos ts, algo redundante pero funciona ...

Sí, también lo estoy logrando usando ttsc. No pude hacer que los transformadores funcionaran directamente con las opciones rollup-plugin-typescript2 transformers , así que opté por usar ttsc

Mi configuración acumulada se ve así:

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

¡Gracias hombre @alshdavid ! ¡Me has salvado la vida! Ayer tuve el mismo problema y al usar typescript-transform-paths ¡lo resolví! Gracias 💪

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

esta solución me ha funcionado en el pasado, pero ahora encuentro muchas situaciones en las que obtengo un error como este:

UnhandledPromiseRejectionWarning: TypeError: No se puede leer la propiedad 'texto' de indefinido

si dejo de usar alias (y estos complementos), entonces funciona sin problemas. ¿Alguien más tiene este problema?

esta solución me ha funcionado en el pasado, pero ahora encuentro muchas situaciones en las que obtengo un error como este:

UnhandledPromiseRejectionWarning: TypeError: No se puede leer la propiedad 'texto' de indefinido

si dejo de usar alias (y estos complementos), entonces funciona sin problemas. ¿Alguien más tiene este problema?

Yo tengo el mismo error

esta solución me ha funcionado en el pasado, pero ahora encuentro muchas situaciones en las que obtengo un error como este:

UnhandledPromiseRejectionWarning: TypeError: No se puede leer la propiedad 'texto' de indefinido

si dejo de usar alias (y estos complementos), entonces funciona sin problemas. ¿Alguien más tiene este problema?

Hola, estoy emitiendo el mismo problema, pero en un contexto diferente: estoy usando rollup para agrupar una biblioteca de componentes escrita con Vue y Typescript. Este es el archivo 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 })
    ]
  }
];

Ya utilizo el comando ttsc --emitDeclarationOnly después del rollup --config one, para resolver los alias, pero los archivos .vue.d.ts generados por el resumen no se procesan (por supuesto).

El mismo problema con ttypescript y typescript-transofrm-paths , no funcionó: decepcionado. Al ejecutar la compilación:

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

Pero usando @zerollup/ts-transform-paths y ttypescript funciona 🎉

Hay una configuración impresionante aquí: https://www.npmjs.com/package/@zerollup/ts -transform-routes # 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": ["*"]
            }
        ]
    }
}

¡Estupendo! Resolví de una manera diferente, pero no está relacionado con este complemento. Eliminé typecript-transform-path y ttypescript y dejé el complemento actual como está (typecript ()). Usé tsc-alias después del resumen para resolver el problema. Reemplaza incluso archivos vue porque procesa archivos .d.ts después de su generación.

Usé tsc-alias después del resumen para resolver el problema. Reemplaza incluso archivos vue porque procesa archivos .d.ts después de su generación.

@mantlebee ¿Te importaría publicar un ejemplo de tu tsconfig.json así como tu configuración acumulada?

Pero usando @zerollup/ts-transform-paths y ttypescript funciona 🎉

@luanorlandi ¿ ts-transform-path funciona en tiempo de ejecución? Probablemente no sea una gran idea para el código de la biblioteca.

Usé tsc-alias después del resumen para resolver el problema. Reemplaza incluso archivos vue porque procesa archivos .d.ts después de su generación.

@mantlebee ¿Te importaría publicar un ejemplo de tu tsconfig.json así como tu configuración acumulada?

Las propiedades importantes son declaration , declarationDir y 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"
  ]
}

Archivo rollup.config.js simple

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

Luego puse todo en el comando prepublishOnly (solo porque me resulta útil)

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

TSC-ALIAS realizará el reemplazo dentro de la carpeta dist/src ; Elijo poner todo dentro de eso porque ts-alias reemplazará los alias que piensan estar dentro de la carpeta src.

No es una conclusión óptima, pero funciona. Verificaré la solución de

Por supuesto, todas las demás bibliotecas deben configurarse para evitar la carpeta dist/src , como jest

Pero usando @zerollup/ts-transform-paths y ttypescript funciona 🎉

@luanorlandi ¿ ts-transform-path funciona en tiempo de ejecución? Probablemente no sea una gran idea para el código de la biblioteca.

No lo creo, el transformador es solo para el paso de compilación, como lo describe la biblioteca:

_... tsconfig baseUrl + reescritura de alias de rutas en paquetes y archivos de declaración. Todos ellos se reescribirán a relativo en archivos js transpilados y en archivos d.ts._

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

¿Fue útil esta página
0 / 5 - 0 calificaciones