如何使用 ts-loader 忽略 webpack 中的测试文件答案

【问题标题】：How to ignore test files in webpack with ts-loader如何使用 ts-loader 忽略 webpack 中的测试文件
【发布时间】：2017-05-05 10:57:14
【问题描述】：

我有一个项目使用 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 一起工作正常）。

【问题讨论】：

ts-loader 默认编译所有 ts 文件，即使是 Webpack 不被告知捆绑的文件，例如由于缺少全局变量而会抛出错误的测试文件。 ts-loader 可以配置为仅编译 Webpack 被告知要捆绑的文件，如此答案 stackoverflow.com/questions/41289265/… 所述

标签： typescript webpack

【解决方案1】：

你可以为加载器test属性指定一个函数而不是正则表达式；这可以给你更多的控制权。

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

【讨论】：

感谢您的指点，但它没有修复它（我添加了评论）。问题似乎出在打字稿而不是 webpack 过滤...

【解决方案2】：

找到了。我的 'ts-loader' 版本落后了，不知何故无法正确处理已安装的 @types。

经验法则：打包、构建、转译问题：升级开发依赖项。

【讨论】：

我尝试升级到最新版本，此时是 2.1.0，但我已经在那个版本（并在 node_modules 文件夹中仔细检查以确保），我'我仍然得到这个确切的问题！你有没有做其他事情，或者只是升级版本？
确保 typescript 也更新到最新版本（目前为 2.3.x）...

【解决方案3】：

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

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

不知道为什么 OP 和公司没有出现这种情况。也许他们的.tslint 文件中已经有了这些设置（例如，因为他们的项目是从另一个项目生成或派生的）。

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

【讨论】：

你为我节省了大量使用 webpack 撞墙的时间。谢谢！
我假设您将所有测试文件放在./lib/__tests__ 下，对吗？如果您在 tsconfig 中排除该文件夹，您将失去 TS 的智能感知。我认为更合理的解决方案是this。
如果我希望 typescript 在开发期间检查测试文件，但我不想将它们包含在我的包中怎么办？