typescript - 导入 XML 文件时，Visual Studio Code incorreclty 报告错误“找不到模块”，而此错误不会出现在构建中

Question

我正在编写一个 Typescript 测试用例，它需要一些静态 xml，从作为项目一部分的文件加载。我在节点/打字稿项目中使用 webpack，发现 VSC 打字稿与项目的打字稿不同步。

导致问题的行（从 VSC 角度来看）是这样的（测试用例和 xml 文件位于同一目录中）：

从'./app.config.xml'导入数据；

为了让导入工作（在项目中），我必须做以下事情（导入其他资产）：

1) 确保我在 webpack 中为 xml 文件使用 raw-loader：

  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'raw-loader'
      },

2) 在声明文件 (./lib/declarations.d.ts) 中声明模块

declare module '*.xml' {
  const content: string;
  export default content;
}

3) 将此声明文件包含在 tsconfig 的 types 属性中

"types": [
  "mocha", "node", "./lib/declarations"
],

在我的测试用例中，我尝试按如下方式导入：

从'./app.config.xml'导入数据；

但是，VSC 中的 Typescript 报告此错误：

找不到模块 './app.config.xml'.ts(2307)

但是，当我构建项目时，这不是问题。如果我从声明文件中删除模块声明，那么构建确实会失败并出现同样的错误。所以不知何故，VSC 中的 Typescript 与项目中安装的 Typescript 不同步。VSC 中的 typescript 版本与项目相同（版本 3.7.2）。

由于构建工作正常，我不知道它是否“可以签入”​​。我不喜欢在 VSC 中看到错误，因为它与项目不同步。到目前为止，在我的 Typescript 旅程中，项目中的 typescript 和 VSC 中的 typescript 一直是同步的，所以我无法理解这里发生了什么。我试图清理我的回购并重建，但这没有任何区别。

在 VSC 中，我使用的是“Typescript extension Pack (0.2.0)”（其中包括 TSLine、TypeScript Hero、json2ts、Move TS、Path Intellisense、Tyescript Impoerter、Prettier、Debugger for Chrome）但是，我不相信这些插件中的任何一个都对 VSC 报告的错误负责。我认为错误来自直接内置于 VSC 的 Typescript 支持。

为了完整起见，我的 tsconfig 是：

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "types": [
      "mocha", "node", "./lib/declarations"
    ],
    "lib": [
      "es5",
      "es2015",
      "es6",
      "dom"
    ]
  },
  "include": [
    "lib/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

和 webpack 文件：

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  devtool: 'source-map',
  mode: 'development',
  entry: ['./tests/all-tests-entry.js', './lib'],
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'raw-loader'
      },
      { test: /\.ts(x?)$/, loader: 'ts-loader' },
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.json']
  },
  watchOptions: {
    ignored: /node_modules/
  },
  output: {
    filename: 'test-bundle.js',
    sourceMapFilename: 'test-bundle.js.map',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs'
  }
};

和 ./tests/all-tests-entry.js：

var context = require.context('./', true, /.spec.ts$/);
context.keys().forEach(context);
module.exports = context;

和相关文件的目录结构：

/project-root/
tsconfig.json
webpack.config.test.ts

/project-root/lib/
declaration.d.ts

/project-root/tests/
widget.class.spec.ts
app.config.xml

这是 VSC 的快照（禁用所有扩展）报告项目构建中不存在的错误：

标签： typescriptwebpackvisual-studio-code

Answer 1

存在不匹配是因为您从命令行使用 webpack 编译代码，但 VS Code 使用普通 TypeScript 为其 IntelliSense 提供动力。

TypeScript 本身不知道如何导入任意数据文件（如 xml）。如果您尝试使用tsc而不是webpack.

有关更多信息以及如何解决普通 TS 中的问题，请参阅这些答案。基本上，您需要在d.ts项目中添加一个文件，声明如下：

declare module "*.xml" {
const value: string;
  export default value;
}