Thursday 5 August 2021

Disable transpiling to ES5 in Vue-CLI app while debugging

I have a Vue CLI app that, out of the box, uses babel to transpile to ES5. Sometimes this causes issues while debugging (because the code I'm looking at through a sourcemap is not quite the code that is being run).

How can I disable this transpilation, at least in debug mode? Part of the problem is that because this just came set up, I don't really understand what all the steps of the chain of webpack, babel, etc are, and it seems very complicated each time I try to read up on it.

The relevant parts of my package.json are:

  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "copy-webpack-plugin": "^4.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.5.21",
    "webpack-dev-server": "3.2.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

The code is here.



from Disable transpiling to ES5 in Vue-CLI app while debugging

No comments:

Post a Comment