javascript - 在 Vue Webpack 中禁用转译器以更轻松地调试

Question

在 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 .

我不知道如何继续。有人成功禁用了大多数转译以便于调试吗？

Answer 1

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

我猜测有某种机制可以指定您的目标浏览器，以及在您的设置中要填充的内容。尝试一下，看看是否更容易调试。