Búsqueda de sitios web

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/Button

pero el problema surge cuando intento importarlos desde fuera del baseUrl, es decir:

../../javascript/components/Button

Tan pronto como intento esto, obtengo los siguientes errores:

[!] Error: The keyword 'interface' is reserved

Así 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.

Artículos relacionados