WebStorm tsconfig.json 似乎没有更新正确的文件答案

【问题标题】：WebStorm tsconfig.json appears to not update the correct filesWebStorm tsconfig.json 似乎没有更新正确的文件
【发布时间】：2017-07-13 19:07:18
【问题描述】：

我正在使用 TypeScript 开发一个 node.js 应用程序。

我在项目的根文件夹中创建了一个 TypeScript 文件。我运行tsconfig，它似乎更新了dist 文件夹。但是，当我运行该应用程序时，我收到一个错误，表明未定义函数。

这就是事情变得令人困惑的地方：在我的src 文件夹中似乎有旧版本的.js 和.map 文件与我的源文件同名。这个.js 文件似乎有一个旧版本的文件缺少必要的功能（类方法），与我的/dist 文件夹中的当前版本不同。

最后，我正在尝试对我的/dist 文件夹中的文件运行调试器，并在我的/src TypeScript 文件中设置断点。

这是我在/src 文件夹中看到的文件结构示例（此 js 文件不是当前文件）：

这里是我的/dist文件夹的文件结构示例，转译后的js代码所在的文件夹：

此外，这里是项目的 Web 应用（其余）部分的调试器设置：

最后，这是tsconfig.json 文件的示例：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"],
    "lib": ["ES6"],
    "sourceMap": true,
    "inlineSources": true,
    "pretty": true,
    "outDir": "./dist",
    "rootDir": "./src/",
    "noLib": false
  },
  "compileOnSave": true,
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "node_modules/@types"
  ]
}

我想了解是什么问题，导致它读取错误的 js 文件，而不是 /dist 文件夹中的那些？
我可以做些什么来解决这个问题以指向 /dist 文件夹。我以为我设置的调试器设置会这样做，但事实并非如此。

更新：我删除了在 src 文件夹中生成的 .js 文件，它们最终返回到该文件夹中，但在进行其他更改后，它们又不是最新的。我不确定是什么生成了这些文件；它是 webstorm 中的设置还是 tsconig.json 中的设置？

其他的东西看起来不太对劲。当我打开 dist 文件夹中的一个文件时，发现下面的代码而不是 JS 代码：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//# sourceMappingURL=group.js.map

这不是我所期待的，因为我期待看到转译后的 js 代码。

【问题讨论】：

如果删除src/文件夹中的那些.js文件，它们会再次出现吗？
他们没有，但现在我收到“找不到模块”错误，这阻止了应用程序。从开始。此外，当我滚动到 /dist 文件夹中 .js 文件的底部时，我会看到以下内容：//# sourceMappingURL=group.js.map。不知道这是否有帮助。
这是另一个错误。 //# sourceMappingURL=group.js.map 是附加到 javascript 文件末尾以启用源映射的注释。
看来 sourceMappingUrl 路径不正确。当我尝试删除位于 /src 文件夹中的 .map 文件时，它告诉我它正在被引用，并且它指向 /dist 文件夹中的 sourceMappingUrl。
似乎期望 /src 文件夹中有一个与 .ts 文件对应的 .js 文件。当 .js 文件和 .map 在 /dist 文件夹中结束时。这令人困惑。

标签： node.js typescript webstorm

【解决方案1】：

您在包含和 rootDir 中声明 src，所有内容都应声明为相对于 rootDir，但在这种情况下，您可能不需要包含或排除，因为您将所有内容都包含在src 无论如何。 compileOnSave 选项是在您删除文件时生成文件的原因，因为已经设置了 watcher 来执行此操作。您还混合了 target 和 lib javascript 版本。

如果您已经在使用types 属性，则无需明确排除@types。

如果指定了类型，则只包含列出的包。

这是一个你可以尝试的清理配置

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": ["reflect-metadata"],
    "lib": ["ES5"],
    "sourceMap": true,
    "inlineSources": true,
    "pretty": true,
    "outDir": "dist",
    "rootDir": "src",
    "noLib": false
  },
  "compileOnSave": false
}

【讨论】：