How to add ES 2020 to Vue 2?

Question

Vue.js

How to add new babel preset in vue 2?

No matter how he asked Google, this question he cannot understand.
I want to use the new ES features, especially the "?" operator, when diving deep into objects.

Answer 1

https://www.npmjs.com/package/vue-template-babel-c...

Answer 2

A sketch of a slightly less hacky way than the one suggested above:

vue.config.js

const { transformSync } = require("@babel/core");

const fs = require('fs');

const babelTransform = {
  transformCode: (_, code) => transformSync(`(function(){${code}}())`, {
    filename: "",
    ast: false,
    retainLines: true,
    babelrc: true,
    compact: true,
    minified: true
  }).code.replace(/;$/,'')
};

const addBabelTransform = (options) => {
  const { compilerOptions } = options;
  const modules = compilerOptions && compilerOptions.modules ? compilerOptions.modules.concat(babelTransform) : [babelTransform];
  return {
    ...options,
    compilerOptions: {
      ...compilerOptions,
      modules
    }
  }
}


module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(addBabelTransform);
  },
}

I didn’t bring him to mind, because. it’s still too “dirty”, but there’s really no need: if you need to dive deep into an object in a component in search of what may not be there, this is a clear sign that the current component is too fat and urgently needs to be cut into smaller pieces .