无法使用 Babel 和 Webpack 在 Chrome 中设置断点答案

【问题标题】：Can't set breakpoint in Chrome with Babel and Webpack无法使用 Babel 和 Webpack 在 Chrome 中设置断点
【发布时间】：2016-08-18 21:05:39
【问题描述】：

我已经使用“新”堆栈开始了一个新项目：React+Webpack+Babel。

我正在尝试探索这项工作，但在 chrome 中进行调试时遇到了问题。当我使用 Babel 和 Webpack 时，我无法在源文件的某些行上设置断点。（我创建源图）。我希望能够调试 JSX 文件。

我已经设置了一个小项目来重现该问题。 https://github.com/pierre-hilt/babel_webpack_sourcemap.git

这是我的配置：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'source-map',
  entry: './build/index',
  output: {
    path: path.join(__dirname, 'static'),
    filename: '[name].bundle.js',
    publicPath: '/',
  },
  module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        loader: "source-map-loader"
      }
      ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
}

babelrc:

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": []
}

App.jsx（我尝试在第 6 行中断，但这是不可能的......）

import React, { Component, PropTypes } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title,
    };
  }

  changeTitle(newTitle) {
    this.setState({ title: newTitle });
  }

  render() {
    return (
      <div>
        This is {this.state.title}
      </div>
    );
  }
}

App.propTypes = { title: PropTypes.string };

export default App;

我尝试了不同的开发工具选项（便宜的、模块的……）。我也尝试过 Babel loader，但也不起作用。

你有什么想法吗？这是一个已知问题吗？

【问题讨论】：

嗯，对我来说似乎是 Chrome 的一个错误。已提交问题：bugs.chromium.org/p/chromium/issues/detail?id=606380 同时，添加调试器语句是否有效？
是的调试器工作，但它不是长期项目的合理解决方案:) 好的，我会看看谢谢

标签： google-chrome-devtools webpack babeljs source-maps

【解决方案1】：

好的，我找到了一个很好的解决方法！

babelrc

{
  "presets": [
    "react"
  ],
  "plugins": []
}

Babel 脚本

"babel": "babel client -d build --source-maps",

webpack 配置

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'source-map',
  entry: './build/index',
  output: {
    path: path.join(__dirname, 'static'),
    filename: '[name].bundle.js',
    publicPath: '/',
  },
   module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        loader: "source-map-loader"
      }
      ],
    loaders: [
    {
      test: /\.js?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['es2015']
      }
    }
  ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
}

我首先只用 babel 转译 JSX，然后用 babel loader 和 webpack 转译 ES2015。

最后我得到了可以在任何地方设置断点的源文件！

【讨论】：