Question

tldr;我希望一次将我的JS项目转换为TS一个文件，而无需构建步骤就能运行Mocha测试。

我在当前的JavaScript代码中利用了很多Babel转换（类props，jsx等），Mocha在运行时通过注册babel加载器（基本上是mocha --require @babel/register）来处理。这意味着运行单个测试很快，并且不需要整个项目的构建步骤。

我关注了a guide on getting started with TypeScript using the (relatively) new babel plugin from Microsoft：@babel/preset-typescript。在基本情况下，此方法效果很好：将app.js转换为app.ts。

它没有涉及的是如何进行逐步过渡。对我来说，修复3978个打字错误（执行<code>find</code> ...之后的实际计数）有点不堪重负，并且可能使开发停滞两周。使我的200个LOC帮助程序库很好地与react-redux中的定义进行编译，花费了一个多小时。

在进行git mv app.{j,t}s时效果很好，但对其他任何文件进行操作都是灾难。现有的Mocha测试由于无法找到正确的文件而迅速崩溃，即使在注册Babel并添加适当的扩展名时也是如此：

mocha --extension js,jsx,ts,tsx --require @babel/register

通常，如果我做git mv Logger.{j,t}s，我会得到Error: Cannot find module './lib/logging/Logger'。

是否可以让Mocha的模块加载器识别打字稿文件并通过Babel透明地运行它们？

Answer 1

这是我如何在我们的javascript / typescript frankenstein混合代码库中进行此工作的方法。 mocha只是在执行我们的测试之前就将代码进行编译。这样一来，所有步骤即可完成，而无需两个单独的步骤。这是我下面的配置。您可以仅将这些添加为cli标志来替换摩卡选项。

// .mocharc.js
module.exports = {
    diff: true,
    extension: ['ts', 'tsx', 'js'], // include extensions
    opts: './mocha.opts', // point to you mocha options file. the rest is whatever.
    package: './package.json',
    reporter: 'spec',
    slow: 75,
    timeout: 2000,
    ui: 'bdd'
};

// mocha.opts
--require ts-node/register/transpile-only // This will transpile your code first without type checking it. We have type checking as a separate step.
// ...rest of your options.

// package.json
{
  "scripts": {
    "test": "mocha"
  }
}

更新：包括已转换的React项目的相关tsconfig选项：

{
    "compilerOptions": {
        "noEmit": true, // This is set to true because we are only using tsc as a typechecker - not as a compiler.
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["dom", "es2015", "es2017"],
        "jsx": "react", // uses typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allows a partial TypeScript and JavaScript codebase
        "checkJs": true, // checks types in .js files (https://github.com/microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files)
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
    },
    "include": [
        "./src/**/*.ts",
        "./src/**/*.tsx",
        "./src/pages/editor/variations/**/*" // type-checks all js files as well not just .ts extension
    ]
}

在运行Mocha测试时混合打字稿和javascript模块

1 个答案: