web-dev-qa-db-fra.com

Vue CLI 3 ne convertit pas les fournisseurs en ES5

Nous avons un projet vue-cli 3. Cela fonctionne plutôt bien et se compile sans problème.

Le fait est que nous devons prendre en charge l'ancien navigateur prenant uniquement en charge le code ES5.

Dans le projet, nous avons intégré quelques bibliothèques externes écrites en ES6 (reconnecting-websocket En est un exemple).

Problème

Après avoir compilé notre projet avec ces externes, le code produit par vue-cli a le code ES6.

Par exemple, notre chunk-vendors.js A ce 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&&

avec une fonction de flèche grasse ES6 const o=()=>{. Donc, exécuter ce code dans les anciennes pauses du navigateur.

Voici notre fichier .browserlistrc Car il semble être le moyen recommandé d'ajouter la prise en charge du navigateur dans Vue CLI 3:

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

Il semble vue CLI transpile correctement le code de l'application dans ES5. Mais il ne fait pas une autre transmission aux fournisseurs.

Existe-t-il un moyen de configurer vue, en utilisant CLI v3, pour faire un transpile final après la construction pour vous assurer que les fichiers sont tous compatibles ES5?

Nous pensions que Babel et Webpack intégrés le feraient automatiquement, mais il semble que ce ne soit pas le cas.

Nous avons essayé d'utiliser l'option transpileDependencies dans vue.config.js Mais cela n'a rien changé et les grosses flèches étaient toujours là dans le bloc fournisseur.

vue.jsecmascript-6babeljsecmascript-5vue-cli-3
14
BlackHoleGalaxy

Créez un fichier appelé babel.config.js dans le même répertoire que votre vue.config.js fichier.

Dans ce fichier vous allez vouloir ajouter: -

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

Cela devrait maintenant utiliser babel pour transpiler des modules externes.

Elle doit être utilisée conjointement avec l'option transpileDependencies dans vue.config.js.

5
Molemann