Question

我使用“新”堆栈启动了一个新项目：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;

我尝试了不同的devtool选项（便宜，模块，......）。我也试过Babel loader，但是也没用。

你知道吗？这是一个众所周知的问题吗？

Answer 1

好的，我找到了一个工作正常的解决方法！

babelrc

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

Babel script

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

webpack config

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。

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

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

1 个答案: