Как добавить ES 2020 во Vue 2?

Question

[Андрей Чирков]

Как добавить новый babel preset во vue 2?

Как не спрашивал у гугла именно этот вопрос он не может понять.
Хочу пользоваться новыми фишками ES, особенно оператором "?", при погружении вглубь объектов.

Answer 1

[Антон Антон]

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

Comments

[Aetae]

Метод попатчить модуль без жуткой подмены в node_modules:

function monkeyPatchCache(from, to) {
  // warm cache
  require(from);
  require(to);

  require.cache[require.resolve(from)] = require.cache[require.resolve(to)];
}

monkeyPatchCache("vue-template-es2015-compiler", "vue-template-babel-compiler");

Добавить вверх vue.config.js.
Правда хз не сломается ли при многопоточности(не проверял), но всяко лучше чем вариант предложенный автором.

Answer 2

[Aetae]

Набросок чуть менее хакерского способа, чем предложенный выше:

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);
  },
}

До ума я его не довёл, т.к. всё равно слишком "грязно", а надобности то особо и нет: если вам надо в компоненте погружаться глубоко в объект в поисках того, чего там может не быть - это явный признак того что текущий компонент слишком разжирел и его срочно надо резать на меньшие кусочки.