我汇总了一个汇总构建系统,该系统使用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'
}
};
非常感谢!
答案 0 :(得分:4)
研究了一段时间之后,我发现@rollup/plugin-typescript
默认情况下仅在项目根目录内转换文件。要覆盖此行为,您需要在插件的include
选项中指定计划使用的文件(包括项目中的文件)的位置。
import ...
const plugins = [
/* ... */
typescript({
include: [
// Project files
'./**/*.ts+(|x)',
// Files from outside of the project
'../../javascript/**/*.ts+(|x)'
]
})
];
export default {
/* ... */
};
您还需要在“ tsconfig.json”中执行此操作,因为该插件会抱怨您的tsconfig中未列出外部文件。