compilar - Error de Rollup + Typescript al importar archivos fuera de baseUrl
He creado un sistema de compilación con Rollup que toma una carpeta de componentes de TypeScript y los exporta como módulos.
El sistema de compilación funciona perfectamente si los archivos de los componentes se encuentran dentro de la estructura de carpetas:
src/components/Buttonpero el problema surge cuando intento importarlos desde fuera del baseUrl, es decir:
../../javascript/components/ButtonTan pronto como intento esto, obtengo los siguientes errores:
[!] Error: The keyword 'interface' is reservedAsí es como se ve mi archivo tsconfig:
{
"compilerOptions": {
"jsx": "react",
"module": "es2015",
"target": "es2017",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"strictNullChecks": true,
"sourceMap": true,
"baseUrl": ".",
"preserveSymlinks": true,
"esModuleInterop": true,
"paths": {
"ui": ["../../components"]
}
},
"include": ["src/**/*.tsx"],
"exclude": ["node_modules"]
}y mi rollup.config
import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import less from 'rollup-plugin-less';
import alias from 'rollup-plugin-alias';
const plugins = [
alias({
ui: '../../components',
resolve: ['.tsx', '.ts', '.less']
}),
resolve(),
commonjs({
// All of our own sources will be ES6 modules, so only node_modules need to be resolved with cjs
include: 'node_modules/**',
namedExports: {
'node_modules/react/index.js': [
'Component',
'PropTypes',
'createElement'
],
'node_modules/lodash/lodash.js': ['isEmpty', 'isString']
}
}),
less({ insert: 'true' }),
typescript()
];
export default {
plugins,
external: ['react'],
input: './src/main.js',
output: {
sourcemap: true,
file: './lib/index.js',
format: 'cjs'
}
};¡Muchas gracias de antemano!!!
Respuesta #1
Después de investigar por un tiempo, descubrí que @rollup/plugin-typescript solo transforma archivos dentro del directorio raíz del proyecto por defecto. Para anular ese comportamiento, necesitas especificar en la opción include del plugin, los patrones de coincidencia (globs) para los archivos que planeas usar, incluyendo los archivos dentro de tu proyecto.
import ...
const plugins = [
/* ... */
typescript({
include: [
// Project files
'./**/*.ts+(|x)',
// Files from outside of the project
'../../javascript/**/*.ts+(|x)'
]
})
];
export default {
/* ... */
};También necesitarás hacer esto en tu 'tsconfig.json', porque el complemento se quejará de que los archivos externos no están listados en tu tsconfig.
