node.js - 如何使用 React 入门套件让调试器识别 webstorm 10 中的源映射

Question

我创建了一个示例 react starter kit使用 webstorm 的预定义项目模板在 webstorm 中创建项目，并尝试在 Debug模式下设置断点。

我首先使用 npm run build 构建项目，然后设置调试配置来运行 build/server.js。

但是它无法识别原始源文件中的任何断点，并且似乎忽略了源映射。如何让它识别源映射并允许我在源文件中设置断点以及单步执行源文件。

React 入门套件存储库中存在此问题:https://github.com/kriasoft/react-starter-kit/issues/121但我看不到解决方案是什么，并且与评论者不同，我什至无法让它进入源文件......它只是停留在生成的 js 文件上。

Answer 1

嗯...WebStorm 10 不支持 Webpack 生成的源映射。 WebStorm 11 中的客户端应用程序部分支持它们(请参阅 http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ )，但 Node.js 不支持它们。因此，您无法在 WebStorm 11 中调试 server.js，但可以调试客户端。为此，请尝试以下操作:

在src/config.js中更改appConfig，如下所示:

const appConfig = merge({}, config, {
  entry: [
    ...(WATCH ? ['webpack-hot-middleware/client'] : []),
    './src/app.js',
  ],
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: 'app.js',
  },
devtool: 'source-map',
module: {
    loaders: [
      WATCH ? {
        ...JS_LOADER,
        query: {
          // Wraps all React components into arbitrary transforms
          // https://github.com/gaearon/babel-plugin-react-transform
          plugins: ['react-transform'],
          extra: {
            'react-transform': {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module'],
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react'],
                },
              ],
            },
          },
        },
      } : JS_LOADER,
      ...config.module.loaders,
      {
        test: /\.css$/,
        loader: 'style-loader/useable!css-loader!postcss-loader',
      },
    ],
  },
});

设置 javascript 调试运行配置:

网址:http://localhost:5000远程 URL:将项目根文件夹映射到“webpack:///path/to/react-starter-kit”，例如“webpack:///C:/WebstormProjects/react-starter-kit”将 build/public 映射到 http://localhost:5000

这并不完美，但通常可以工作 - src/routes.js、src/app.js 中的断点被击中