You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 00:45:28