在VS Code中使用Node Shim调试React Native [英] Debugging React Native with Node shims in VS Code
问题描述
我有一个React Native项目(从Ignite CLI 2.0.0默认样板创建)，该项目需要对基于节点的软件包有所依赖.
I have a React Native project (created from the Ignite CLI 2.0.0 default boilerplate) that needs some dependencies on node-based packages.
So, I created a transformers.js, babel-transform.js and a rn-cli.js according to ReactNativify. This is basically equivalent to what's in a normal .babelrc file and uses babel-plugin-rewrite-require to swap out Node objects and replace them either with Browserify shims, or empty mocks. So far, so good.
现在问题是在Visual Studio代码(1.13.1)中对此进行调试.我已经进行了重要的冒险(或恐怖故事，如果可以的话)，并且已经进行了RN调试，但认为已经有了将Node降级为7.10.1后运行.
Now the problem is debugging this in Visual Studio Code (1.13.1). I've had a significant adventure (or horror story, if you will) with RN debugging already, but thought to have it running after downgrading Node to 7.10.1.
一切似乎都进行得很好，确实会在断点处暂停，逐步执行代码等，但这是 actual 的代码，而不是填充了垫片的已编译输出！此外，在没有代码缩进的只读代码窗口中会打开断点.
Everything seems to go well, does halt on breakpoints, steps through code, etc., however this is the actual code not the transpiled output with the shims in place! Furthermore breakpoints open in a read-only code window that has no code indentation.
我的调试配置是:
{
"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
}
有人对此有相似的，希望更好的体验吗?
Does anyone have similar, hopefully better experience with this?
PS.可能与此相关的 vscode github问题(#26782).
PS. There may be a vscode github issue (#26782) related to this.
推荐答案
在我的问题中，我遇到了两个问题.
In my question I bumped into 2 problems.
第一个测试是针对实际代码执行的测试，这似乎是Jest的问题.笑话小组说:
The first one, tests performing against actual code, appeared to be an issue with Jest. The Jest team stated:
这是预期的行为. Jest应该在源文件上运行.在任何大型代码库上，在运行测试之前生成捆绑包的速度都太慢，因此Jest可以及时编译文件，这使其运行起来很快.
现在这可能是一种沟通不畅的问题，您可以将其与正确的babel-jest配置配合使用来进行动态转换，但我没有得到团队的进一步帮助.因此，我决定选择其他测试平台(Mocha，Jasmine和/或Karma).
Now this is probably a miscommunication and you can use it with proper babel-jest configuration to do dynamic transforms, I did not receive further help from the team. So I decided to go for a different test platform (either Mocha, Jasmine and/or Karma).
如果您想和Jest一起碰碰运气，可以继续关注以下话题: https: //github.com/facebook/jest/issues/4028
If you want to try your luck with Jest you can follow up on this thread: https://github.com/facebook/jest/issues/4028
第二个问题是在调试会话期间在VS中的只读面板中打开代码，这是由Microsoft处理的一个未解决的问题.您可以在此处查看进度: https://github.com/Microsoft/vscode/issues/26782
The second problem, code opening in a read-only panel in VS during debugging sessions, is an open issue being processed by Microsoft. You can check progress here: https://github.com/Microsoft/vscode/issues/26782
[更新:我刚刚收到Jest团队的进一步指示:
[Update: I just received further instruction from the Jest team:
@aschrijver杰斯特(Jest)处理此问题的一般方法是自己进行翻译.因此，您可以在配置中设置转换器，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
此处为Typescript提供的示例配置可让您大致了解: https: //github.com/kulshekhar/ts-jest
An example config for Typescript is here to give you an idea of what this could look like: https://github.com/kulshekhar/ts-jest
就垫片而言，我认为您可能想要的实际上是Jest模拟.导入或需要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.
]
这篇关于在VS Code中使用Node Shim调试React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
