早午餐源映射：Chrome devtools中未触发断点

Question

我正在使用Brunch内置的默认源映射。我可以看到文件，但是在源映射文件中无法打断点。使用JavaScript访问调试器debugger;是有效的，这表明问题出在Brunch方面。

这是我的brunch-config.js：

module.exports = {

  files: {
    javascripts: {
      joinTo: {
        'js/vendor.js': /^(?!source\/)/,
        'js/app.js': /^source\//
      },
      entryPoints: {
        'source/scripts/app.jsx': 'js/app.js'
      },
      order: {
        before: /^(?!source)/
      }
    },
    stylesheets: {joinTo: 'css/core.css'},
  },

  paths: {
    watched: ['source']
  },

  modules: {
    autoRequire: {
      'js/app.js': ['source/scripts/app']
    }
  },

  plugins: {
    babel: {presets: ['latest', 'react']},
    assetsmanager: {
      copyTo: {
        'assets': ['source/resources/*']
      }
    },
    static: {
      processors: [
        require('html-brunch-static')({
          processors: [
            require('pug-brunch-static')({
              fileMatch: 'source/views/home.pug',
              fileTransform: (filename) => {
                filename = filename.replace(/\.pug$/, '.html');
                filename = filename.replace('views/', '');
                return filename;
              }
            })
          ]
        })
      ]
    }
  },

  server: {
    run: true,
    port: 9005
  }

};

我尝试将config的sourceMaps属性设置为'old'、'absoluteUrl'和'inline'(请参阅Brunch config文档)，但仍然无法触发断点。

我运行命令brunch watch --server，并使用Chrome浏览器。同样的行为也出现在Chrome Canary中。在Firefox浏览器中可以触发断点，没有问题。

有趣的是，源映射文件似乎具有一个base64字符串来定义它们，类似于：

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpb...

这个映射似乎起作用了，但为什么我在Chrome开发工具中无法命中断点？

提供了MVCE。请按照以下说明操作：

1. 克隆此示例存储库
2. npm install
3. brunch build（确保使用npm install brunch -g全局安装）
4. 在Chrome开发工具中设置断点
5. 重新加载应用程序以尝试命中断点

有关更多信息，请参见我的package.json：

{
  "version": "0.0.1",
  "devDependencies": {
    "assetsmanager-brunch": "^1.8.1",
    "babel-brunch": "^6.1.1",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-rewire": "^1.0.0-rc-5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-preset-react": "^6.3.13",
    "babel-register": "^6.11.6",
    "browser-sync-brunch": "^0.0.9",
    "brunch": "^2.10.9",
    "brunch-static": "^1.2.1",
    "chai": "^3.5.0",
    "es6-promise": "^3.2.1",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.20.2",
    "html-brunch-static": "^1.3.2",
    "jquery": "~2.1.4",
    "jquery-mousewheel": "^3.1.13",
    "mocha": "^3.0.0",
    "nib": "^1.1.0",
    "nock": "^8.0.0",
    "oboe": "~2.1.2",
    "paper": "0.9.25",
    "path": "^0.12.7",
    "pug": "^2.0.0-beta10",
    "pug-brunch-static": "^2.0.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-mock-store": "^1.1.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "reselect": "^2.5.3",
    "spectrum-colorpicker": "~1.8.0",
    "stylus-brunch": "^2.10.0",
    "uglify-js-brunch": "^2.10.0",
    "unibabel": "~2.1.0",
    "when": "~3.4.5"
  },
  "dependencies": {
    "jwt-decode": "^2.1.0",
    "lodash": "^4.17.4",
    "postal": "^2.0.5",
    "rc-tree": "^1.3.9"
  },
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

问题在brunch的Github上创建。

更新

通过修复我的brunch配置，按照@JohannesFilter在这个问题中的答案解决了问题。

- Scotty H

---

我认为最好编写（并接受）自己的答案，这样问题就不会被标记为“未回答”。;) - Johannes Filter

@JohannesFilter 好的，我已经发布了一个答案。如果你发现可以改进的地方，请随时提出修改建议。 - Scotty H

Answer 1

这是一个有效但冲突的Brunch配置的副产品。请参阅@JohannesFilter的问题的答案。

本质上，似乎files.joinTo和files.entryPoints是相互排斥的，因为如果它们重叠，files.entryPoints将覆盖files.joinTo的输出。解决方案是选择其中一个，或确保它们在处理的文件上不重叠。例如，以下两个都是可行的配置：

entryPoints: {
  'source/scripts/app.jsx': {
    'js/vendor.js': /^(?!source\/)/,
    'js/app.js': /^source\//
  },
}

或者

joinTo: {
  'js/lib.js': /^(?!source\/)/
},
entryPoints: {
  'source/scripts/app.jsx': {
    'js/app.js': /^source\//
  },
}    

- Scotty H