TypeScript：当编译增加项目结构的深度时如何从父文件夹导入

Posted 2023-03-13

【中文标题】TypeScript：当编译增加项目结构的深度时如何从父文件夹导入

【英文标题】：TypeScript: How to import from parent folder when compilation adds depth to project structure

【发布时间】：2018-02-23 22:07:59

【问题描述】：

我的项目结构如下

dist
  |- src
  |   |- s.js
  |- test
      |- t.js
node_modules
results
  |- r.json
src
  |- s.ts
test
  |- t.ts
tsconfig.json
typings.d.ts

s.ts 导入 r.json 如下：

import * as results from '../results/r.json';

显然，这在编译后不起作用，因为 results 现在是两个文件夹...

解决此问题的正确方法是什么？下面是我的 tsconfig.json

  "compilerOptions": 
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "inlineSourceMap": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "moduleResolution": "node",
    "outDir": "dist/",
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "./typings.d.ts"
    ]
  ,
  "include": [
    "src/**/*.ts",
    "results/r.json",
    "test/**/*.ts",
    "./typings.d.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": 
    "rewriteTsconfig": false
  

【参考方案1】：

最好的方法是完全避免这种情况。尝试使深度级别匹配。

例如：

root
  dist-es5
    index.ts
    index.spec.ts
  src
    index.ts
    index.spec.ts

至于保持测试/规范代码不被分发，你可以有多个tsconfig.json 例如你可以看看：Setting up tsconfig with spec/test folder

【讨论】：

我听从了你的建议。在有更好的解决方案之前，我将 src 和 test 文件夹放在 app 文件夹下。这种方式在源代码中的结果文件夹也是 2 级。谢谢！