Vue CLI 3 does not convert vendors to ES5

Question

We have a vue-cli 3 project. It works pretty well and compiles without problem.

The fact is we have to support old browser supporting ES5 code only.

In the project we integrated some external libraries written in ES6 (reconnecting-websocket is an example).

Problem

After compiling our project with these externals, then the produced code by vue-cli has ES6 code.

For example our chunk-vendors.js has this code:

/*!
 * Reconnecting WebSocket
 * by Pedro Ladaria <[email protected]>
 * https://github.com/pladaria/reconnecting-websocket
 * License MIT
 */const o=()=>{if("undefined"!==typeof WebSocket)return 
WebSocket},a=t=>"function"===typeof t&&

with an ES6 fat arrow function const o=()=>{. So running this code in old browser breaks.

Here is our .browserlistrc file as it seems to be the recommanded way to add browser support in Vue CLI 3:

> 1%
last 2 versions
not ie <= 8
Android >= 4

It seems vue CLI transpiles the app code in ES5 properly. But it doesn't do another pass on vendors.

Is there any way to configure vue project, using CLI v3, to make a final transpile pass AFTER the build to make sure the files are all ES5 compatible?

We thought embedded babel and webpack would do it automatically but it seems it's not the case.

We tried to use the transpileDependencies option in vue.config.js but it didn't change anything and fat arrows were still there in the vendor chunk.

Answer 1

Create a file called babel.config.js in the same directory as your vue.config.js file.

In this file your going to want to add :-

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
  presets: ["@vue/app"]
};

This should now use babel to transpile external modules.

This should be used in conjunction with the transpileDependencies option in vue.config.js.