如何在WebStorm中调试React Express Webpack应用程序

Question

我正在尝试调试react-express应用程序的后端。我正在使用webpack进行捆绑。

如何在WebStorm上编辑配置，以便我可以调试前端和后端？我正在使用WebStorm 2016。

Answer 1

您需要创建并启动Node.js运行/调试配置来调试服务器端代码，并为客户端代码创建和启动JavaScript调试配置。

在JavaScript文件字段的Node.js配置中，您需要指定启动服务器的文件路径。

在URL字段的JavaScript配置中，指定运行服务器的URL。您可能还需要配置本地路径和远程URL之间的映射：最有可能位于组件所在的文件夹和webpack：///之间。 （有关详细信息，请参阅此answer。）

还要确保您的Webpack配置中有dev-tools: 'source-map'。

Answer 2

通过WebStrom上的一些文档，最终设法让它运行起来。首先选择编辑配置，然后会弹出一个菜单，允许您编辑运行/调试配置。单击左侧的 + 按钮并添加节点js。从那里将节点解释器从默认（本地）node_modules更改为项目依赖项中的babel节点。例如〜/ MyWork / Project / node_modules / .bin / babel-node 。然后将 - presets = babel-preset-es2015 添加为节点参数。填写其余配置，然后单击“保存”并运行项目。

这是一个例子：