滚动+导入baseUrl以外的文件时出现Typescript错误。

Question

我把一个卷轴式的构建系统放在一起，把Typescript组件的文件夹作为模块导出。

如果组件文件生活在文件夹结构中，构建系统就能完美地工作，但当我试图从外部导入它们时，问题就出现了。

src/components/Button

但当我试图从外部导入它们时，问题就出现了。baseUrl 的意思。

../../javascript/components/Button

当我尝试这样做的时候，我得到了以下的错误。

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

这是我的... 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"]
}

而我的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'
    }
};

先谢谢你了!!!

Answer 1

在调查了一段时间后，我发现以下问题 @rollup/plugin-typescript 默认情况下只转换项目根目录下的文件。要重写该行为，您需要在 include 选项中，你计划使用的文件的globs，包括你的项目内部的文件，你也需要在你的'tsconfig.json'中这样做，因为插件会抱怨你的tsconfig中没有列出外部文件。

import ...


const plugins = [
    /* ... */
    typescript({
      include: [
        // Project files
        './**/*.ts+(|x)',
        // Files from outside of the project
        '../../javascript/**/*.ts+(|x)'
      ]
    })
];

export default {
    /* ... */
};

你也需要在你的 "tsconfig.json "中这样做，因为插件会抱怨外部文件没有在你的tsconfig中列出。