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.
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.
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
yttypescript
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
yttypescript
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
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 usarttsc
Mi configuración acumulada se ve así: