如何使用反应入门工具包让调试器识别 webstorm 10 中的源映射

Question

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

我首先使用 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调试运行配置：

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

这并不完美，但总体上有效 - src/routes.js、src/app.js 中的断点被命中

如何使用反应入门工具包让调试器识别 webstorm 10 中的源映射

How do I get the debugger to recognize the sourcemaps in webstorm 10 using the react starter kit

debugging

node.js

webstorm

reactjs