如何使用ts-loader在webpack中忽略测试文件。

Question

我有一个项目，使用jest和ts-jest运行名为“*.test.ts”的测试文件。这很好，但当我启动webpack时，测试文件会出现错误：

ERROR in /some/path/note.test.ts
(27,3): error TS2304: Cannot find name '

如何修复webpack配置以完全忽略测试文件？

这是webpack的配置：

const path = require ( 'path' )

module.exports =
{ entry: './src/boot.tsx'
, node:
  { __dirname: false
  }
, output:
  { path: path.resolve ( __dirname, 'app', 'build' )
  , filename: 'app.js'
  , publicPath: '/live-reload/'
  }
, devtool: 'source-map'
, resolve:
  { extensions: ['', '.js', '.ts', '.tsx']
  }
, module:
  { loaders:
    [ { test: /\.tsx?$/
      , exclude: /node_modules/
      , loader: 'ts-loader'
      }
    ]
  }
}

[编辑]

我使用了测试功能来记录已查看的文件，但测试文件并未出现在其中，因此问题不在于Webpack包含错误的文件，而是TypeScript行为异常（因为Jest测试正常运行）。

- Anna B

---

ts-loader默认编译所有的ts文件，即使这些文件不是Webpack要打包的文件，例如测试文件，由于缺少全局变量而会抛出错误。可以按照此答案https://dev59.com/LlgR5IYBdhLWcg3wd9K5的描述，配置ts-loader仅编译Webpack要打包的文件。 - Dylan Landry

Answer 1

我最终也解决了这个问题，但是方法不同，即将以下设置添加到我的.tsconfig文件中：

"include": [
    "./lib/**/*"
],
"exclude": [
    "./lib/__tests__"
]

不确定为什么这对于提问者和公司来说没有出现。也许他们已经在他们的 .tslint 文件中设置了这些设置（例如，因为他们的项目是从另一个项目生成或派生的）。

但是看起来 TypeScript（至少截至2.3.2）会注意这些设置，并忽略 webconfig.config.js 中等效的设置。

- Jonathan

---

你帮我省了很多时间，不用再为webpack发愁了。谢谢！ - Deividas

我猜你把所有的测试文件都放在 ./lib/__tests__ 目录下，对吗？如果你在 tsconfig 中排除了这个文件夹，你将失去 TS 的智能提示。我认为一个更合理的解决方案是使用 这个。 - Bruce Sun

在开发过程中，如果我希望 TypeScript 检查测试文件的语法，但又不想将它们包含在我的代码包中，该怎么办？ - onlyanegg

Answer 2

您可以为加载器的test属性指定一个函数，而不是正则表达式；这样可以让您拥有更多的控制。

test: function (modulePath) {
  return modulePath.endsWith('.ts') && !modulePath.endsWith('test.ts');
}

- Acidic

---

谢谢你提供的指针，但它并没有解决问题（我添加了一个注释）。问题似乎是由于 TypeScript 而不是 Webpack 过滤引起的... - Anna B

Answer 3

找到问题了。我的 'ts-loader' 版本太旧，无法正确处理已安装的 @types。

经验之谈：在打包、构建和转译时出现问题时，升级开发依赖。

- Anna B

---

我尝试升级到最新版本，目前是2.1.0，但我已经在那个版本了（并且在node_modules文件夹中进行了双重检查），但我仍然遇到了完全相同的问题！你还做了其他事情吗，还是只是升级了版本？ - Jonathan

确保TypeScript也更新到最新版本（目前为2.3.x）... - Anna B