存在测试文件时Rollup打包输出的dist目录结构异常
问题根因
异常由两个配置问题共同导致:
- TypeScript 未显式配置
rootDir参数,默认会自动计算所有纳入编译范围文件的公共父目录作为输出路径根。当test/mock/data.ts被意外纳入编译时,公共根目录从./src变为项目根目录,原本应直接输出到dist的源码文件会自动带上src/路径前缀,生成多余的dist/src文件夹。 - 现有配置存在漏洞:
tsconfig.json的排除规则仅过滤了test目录下的.test.*后缀文件,非测试用例的mock文件未被完全排除;rollup-plugin-typescript2默认会编译所有Rollup解析到的TS模块,只要mock文件被依赖链误引用、或被插件扫描命中,就会进入编译流程触发路径计算错误。另外原配置中importHelpers字段放错了层级,属于无效配置。
正式解决方案
不需要临时重命名目录,按以下步骤修改配置即可彻底修复:
1. 修正tsconfig.json配置
将错位的importHelpers移入compilerOptions块,显式指定源码根目录,补全test目录全量排除规则:
{ "compilerOptions": { "outDir": "dist", "rootDir": "src", "module": "esnext", "target": "es5", "lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"], "sourceMap": true, "allowJs": false, "jsx": "react", "declaration": true, "moduleResolution": "node", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "noUnusedParameters": true, "esModuleInterop": true, "importHelpers": true }, "include": ["./src"], "exclude": [ "node_modules", "dist", "test", "**/*.stories.js", "**/*.stories.jsx", "**/*.stories.ts", "**/*.stories.tsx", "**/test/**" ] }
关键配置说明:显式设置rootDir: "src"后,无论编译时扫描到多少其他目录的TS文件,输出路径都会严格以src为根计算,不会再生成多余的层级前缀。
2. 收紧rollup-plugin-typescript2编译范围
修改rollup.config.js中的typescript插件配置,强制限定仅编译src目录下的TS文件,同时开启构建缓存清理避免旧缓存干扰:
// 将原配置中的 typescript() 替换为以下配置 typescript({ tsconfig: "./tsconfig.json", include: ["src/**/*.ts(x)?"], clean: true }),
3. 排查非法引用
全局搜索src目录下的代码,确认没有出现直接引用test/mock/data.ts这类测试目录文件的语句,测试mock文件仅允许在test目录下的用例文件中引用。
配置修改完成后直接执行npm run build,dist目录就会保持预期结构:JS产物和类型声明文件直接输出在dist根目录,不会再生成多余的src子文件夹。
内容的提问来源于stack exchange,提问作者rubenhak
相关产品推荐
相关产品推荐

