javascript - 在 Vue Webpack 中禁用 Transpiler 以便于调试

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。

我不确定如何进行。有没有人成功禁用大多数转译以便于调试？

标签： javascriptdebuggingvue.jswebpackgoogle-chrome-devtools

Answer 1

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

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