JS文件无法通过非相对导入引入TS文件的解决方案咨询
解决JS文件非相对导入TS文件的问题
1. 统一路径解析的绝对路径配置
修改runner.test.js中ts-node的baseUrl为绝对路径,避免工作目录变化导致的解析错误:
// 替换原ts-node.register配置 require('ts-node').register({ compilerOptions: { allowJs: true, baseUrl: resolveApp('src'), // 用项目绝对路径替代相对路径 paths: { "midfx/*": ["midfx/*"] }, }, transpileOnly: true, files: true, });
2. 给Babel添加路径别名支持
JS文件由@babel/register处理,需配置Babel模块解析插件识别非相对导入:
首先安装依赖:
npm install @babel/plugin-module-resolver @babel/preset-typescript --save-dev
然后修改@babel/register的调用逻辑:
// 替换原require('@babel/register') require('@babel/register')({ presets: ['@babel/preset-env', '@babel/preset-typescript'], plugins: [ [ 'module-resolver', { root: [resolveApp('src')], alias: { 'midfx': resolveApp('src/midfx') } } ] ], extensions: ['.js', '.jsx', '.ts', '.tsx'], // 支持所有项目文件扩展名 ignore: [/node_modules/] });
3. 引入tsconfig-paths让Node.js识别TS路径别名
ts-node的paths仅处理TS转译,Node.js本身无法识别路径别名,需补充tsconfig-paths支持:
安装依赖:
npm install tsconfig-paths --save-dev
在runner.test.js中添加注册逻辑:
// 放在ts-node.register之后 require('tsconfig-paths/register')({ baseUrl: resolveApp('src'), paths: { 'midfx/*': ['midfx/*'] } });
4. 移除多余的mock-require逻辑
当前mock-require的路径映射会和路径别名冲突,建议删除以下代码块:
// 删掉所有mock相关的代码 /* glob(`${appFolder}/**/*.js`, {}, (err, paths) => { ... }); glob(`${appFolder}/**/*.ts`, {}, (err, paths) => { ... }); glob(`${appFolder}/**/*.tsx`, {}, (err, paths) => { ... }); */
5. (可选)统一配置到tsconfig.json
建议在项目根目录创建tsconfig.json,集中管理编译配置,避免重复定义:
// tsconfig.json { "compilerOptions": { "allowJs": true, "baseUrl": "./src", "paths": { "midfx/*": ["midfx/*"] }, "target": "ESNext", "module": "CommonJS" }, "include": ["src/**/*"] }
然后修改ts-node的配置:
require('ts-node').register({ project: './tsconfig.json', transpileOnly: true, files: true, });
验证配置
完成修改后运行测试命令:
node runner.test.js
此时JS文件中的非相对导入import { SubApplicationType } from 'midfx/types/types.ts'即可正常解析。
内容的提问来源于stack exchange,提问作者user1676638
相关产品推荐
相关产品推荐

