Disable transpiling to ES5 in Vue-CLI app while debugging

Question

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.

Answer 1

You can try adding

ignore: ["./src"]; // './src' is your desired directory

in your babel.config.js file.

If any of the patterns match, Babel will immediately stop all processing of the current build.

Valid options are Array<MatchPattern> which means an array of patterns, Learn more about it here

Learn more about ignore at their official doc

Since you want to ignore the files only in development mode, you'd need something like this:

ignore: [ process.env.NODE_ENV !== 'production' ? "./src" : "" ],