javascript - 在 VS Code 中使用 Node shim 调试 React Native

Question

我有一个 React Native 项目(从 Ignite CLI 2.0.0 默认样板创建)，需要一些基于 Node 的包的依赖项。

因此，我根据 ReactNativify 创建了一个 transformers.js、babel-transform.js 和一个 rn-cli.js 。这基本上相当于普通的 .babelrc 文件中的内容，并使用 babel-plugin-rewrite-require 来交换 Node 对象并用 Browserify 垫片或空模拟替换它们。到目前为止，一切顺利。

现在的问题是在 Visual Studio Code (1.13.1) 中调试此问题。我有一个significant adventure (或者恐怖故事，如果你愿意的话)已经进行了 RN 调试，但想在将 Node 降级到 7.10.1 后运行它。

一切似乎都很顺利，确实在断点处停止，逐步执行代码等，但是这是实际代码，而不是带有垫片的转译输出!此外，断点在没有代码缩进的只读代码窗口中打开。

我的调试配置是:

    {
        "type": "node",
        "request": "launch",
        "name": "Launch Tests",
        "program": "${workspaceRoot}/node_modules/.bin/jest",
        "args": [
            "--runInBand",
            "--no-cache"
        ]
        // Not needed, but tried ;)
        //  "runtimeArgs": [
        //     "--debug-brk=127.0.0.1:5858"
        //  ],
        //  "port": 5858
    }

有人有类似的、希望更好的经验吗？

PS。可能有 vscode github issue (#26782)与此相关。

Answer 1

在我的问题中，我遇到了两个问题。

第一个，针对实际代码执行的测试，似乎是 Jest 的问题。 Jest 团队表示:

This is the expected behavior. Jest is supposed to run on source files. On any large codebase, generating a bundle before running tests is too slow, so Jest compiles files just-in-time, which makes it fast.

现在这可能是一个误解，您可以将其与适当的 babel-jest 配置一起使用来进行动态转换，我没有从团队那里得到进一步的帮助。因此，我决定选择不同的测试平台(Mocha、Jasmine 和/或 Karma)。

如果你想试试 Jest 的运气，你可以关注这个帖子:https://github.com/facebook/jest/issues/4028

第二个问题是在调试 session 期间在 VS 的只读面板中打开代码，这是 Microsoft 正在处理的一个未决问题。您可以在此处查看进度:https://github.com/Microsoft/vscode/issues/26782

[更新:我刚刚收到 Jest 团队的进一步指示:

@aschrijver the general way Jest handles this is by doing the transpilation itself. So you set up transformers in your config that Jest itself uses to do the transpilation.

https://facebook.github.io/jest/docs/configuration.html#transform-object-string-string

An example config for Typescript is here to give you an idea of what this could look like: https://github.com/kulshekhar/ts-jest

In terms of shims, what I think you might be wanting are actually Jest mocks. A Jest mock can step in instead of an actual module when you import or require it.

]