Отладка create-реакции-app Сборка, используемая для расширения Unpacked Chrome - PullRequest
Новая
       32

Отладка create-реакции-app Сборка, используемая для расширения Unpacked Chrome

2 голосов
/ 14 февраля 2020

Мой текущий процесс сборки состоит в том, чтобы собрать проект с помощью приложения create-реакции, а затем загрузить распакованную сборку как расширение. Оттуда я запускаю его, но когда я это делаю, я получаю сообщение об ошибке в моем основном. [Hash]. js: отформатированный файл.

Обычно я нажимаю на эту ошибку, чтобы go на номер строки, сбросьте отладчик, перезагрузите, а затем выясните, что является причиной проблемы. Тем не менее, файл, похоже, не сопоставлен с исходным кодом. Я не могу просмотреть этот код: 

{
            key: "render",
            value: function() {
                var e = this
                  , t = this.state
                  , n = t.chromeVersion,
                  /// ... props, etc
                  , v = this.props.aProp,
                  , u = this.state.aStateVal,
                  , _ = Object(H.b)(this.state.anotherVal)
                return p.a.createElement("div", {
                // etc etc

, который вместо этого должен выглядеть примерно так: 

render() {
    const {
      chromeVersion,
      // other state values
    } = this.state;
    const error = this.props.aProp
    const display = this.state.aStateVal,
    let getStuff = aFunction(
      this.state.anotherVal
    );

    return ( 
        <div /...
   // etc etc

мой webpack.config. js в основе проекта выглядит например: 

const webpack = require("webpack");

if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = "development";
}

module.exports = {
  entry: `${__dirname}/src/index.js`,
  output: {
    path: `${__dirname}/../build`,
    filename: "background.js"
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        query: {
          babelrc: false,
          presets: [require.resolve("babel-preset-react-app")]
        }
      }
    ]
  },
  plugins: [
    // there used to be an uglify here, but I've removed it
  ],
  devtool: 'source-map'
};

Я запускаю сборку с помощью следующих команд: 

     GENERATE_SOURCEMAP=true NODE_ENV=development react-scripts build 
     && webpack --config path/to/webpack.config.js 
     && node /path/to/prepareManifestForExtension.js  // Needed for chrome app

Что мне не хватает, чтобы иметь возможность отладить мой код при запуске моего приложения chrome? Как я могу получить сообщения об ошибках, которые указывают на исходную сопоставленную строку?

...