在 Vue Webpack 中禁用 Transpiler 以便于调试答案

【问题标题】：Disabling Transpiler in Vue Webpack for Easier Debugging在 Vue Webpack 中禁用 Transpiler 以便于调试
【发布时间】：2019-06-30 19:03:49
【问题描述】：

在 Vue 中设置断点和单步执行代码真的很困难。我认为这是因为将 javascript ES6/ES2015/ES2016/ES2017 转换为 ES5。源映射有点用处，但通常当我“单步”通过时，光标会四处跳动，将我带回console.log 调试。

由于 Chrome 支持大多数最新功能，我想禁用大部分或全部转译以进行开发。

我认为我需要做的是将transpileOptions 添加到 vue-loader.conf.js （显示在这里）：

var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  })
}

这是transpilerOptions 上的 Vue 文档。医生基本上是平底船，说，嘿，参考Buble options。

我不确定如何继续。是否有人成功禁用了大多数转译以便于调试？

【问题讨论】：

我可能已经想通了。似乎大多数调试跳转源于async/await 调用。如stackoverflow.com/questions/43959126/… 中所述，将"exclude": ["transform-regenerator"] 添加到我的.babelrc 似乎可以减少跳跃。

标签： javascript debugging vue.js webpack google-chrome-devtools

【解决方案1】：

我使用 Babel 而不是 Bublé 进行转译，我对 Bublé 了解不多，所以我希望这能有所帮助......我为使调试更容易所做的是暂时修改我的 package.json 中的 browserslist 以支持只有带有"last 1 chrome version" 的最新Chrome。这从构建中删除了大多数转译和 polyfill，因此更容易遵循。

我猜有某种机制可以指定您的目标浏览器，因此也可以在您的设置中填充什么内容。试一试，看看是否更容易调试。

【讨论】：