web-dev-qa-db-fra.com

Comment ajouter un polyfill à nuxt 2.0?

Dans Nuxt 1.4.2, J'ai eu ce qui suit dans mon nuxt.config.js:

build: {
  vendor: ['babel-polyfill'],
  babel: {
    presets: [
      ['vue-app', {
        useBuiltIns: true,
        targets: { ie: 11, uglify: true },
      },
      ],
    ],
  },
},

Il semble que tout cela soit cassé dans Nuxt 2.0. Au minimum, je cherche à polyfiller suffisamment pour que IE 11 fonctionne. Voici ce que j'ai essayé:

Utiliser vendeur comme je le faisais

Enlever build.babel a permis au processus de construction de fonctionner:

build: {
  vendor: ['babel-polyfill'],
},

Mais je pensebuild.vendor est simplement ignoré maintenant, donc cela ne semble rien faire.

Utiliser polyfill.io

J'ai essayé d'ajouter:

script: [
  { src: 'https://cdn.polyfill.io/v2/polyfill.min.js' },
],

à mon head, avec:

render: {
  resourceHints: false,
},

désactiver les astuces preload (je ne sais pas si cela est important). Cela donne une page qui semble correcte - polyfill.min.js est chargé avant tous les autres scripts. D'une manière ou d'une autre, quand je teste sur ie11, Object.entries n'est pas défini et la page explose.

nuxt.jsnuxt-edge
17
David Weldon

Voici les étapes que j'ai suivies pour passer à nuxt 2.2.0, et que mon application fonctionne sur IE 11 avec les polyfills nécessaires. Votre expérience peut différer selon les packages que vous avez installés.

Étape 1

Retirer build.vendor et build.babel de nuxt.config.js.

build.vendor est obsolète. J'ai essayé de Tweak build.babel, comme le nuxt docs indique qu’il utilise par défaut vue-app. Je pense que c'est en fait en utilisant babel-preset-env . Ceci, avec d’autres outils, dépend de browsererslist , qui a un certain rationnel par défaut . Je n'ai pas changé la configuration de ma liste de navigation, mais vous pouvez suivre leurs docs .

Étape 2

Mettez à niveau ou remplacez tous les modules posant des problèmes de construction. Quand j'ai mis à jour, @nuxtjs/apollo avait un problème de transpilation via l’une de ses dépendances. Cela a depuis été résol , mais j'ai fini par passer à vue-apollo + apollo-boost car cela convenait mieux à mon projet.

Étape 3

Ajouter des polyfill pour toutes les fonctionnalités supplémentaires core-js ne fournit pas, mais votre navigateur cible a besoin. Vous devriez être en mesure de les déterminer en fonction des exceptions générées dans la console lors du test de vos cibles.

J'ai utilisé polyfill.io en ajoutant ce qui suit à nuxt.config.js:

const features = [
  'fetch',
  'Object.entries',
  'IntersectionObserver',
].join('%2C');

head: {
  script: [
    { src: `https://polyfill.io/v3/polyfill.min.js?features=${features}`, body: true },
  ],
},

Remarque: j'ai inclus body: true qui déplace le script hors de la section head de votre page. Cependant, il sera inséré avant le code de votre application.

Remarque: IntersectionObserver est recommandé pour prélecture de lien .

Vous pouvez créer une URL similaire en utilisant le générateur . Notez qu'une fois que vous avez sélectionné une fonctionnalité, le constructeur sélectionne automatiquement default, ce qui correspond (du moins que je sache) sur le plan fonctionnel aux polyfill fournis avec core-js. Car core-js _ n’est pas optionnel pour le moment (vous allez l’envoyer quand même), il est donc logique de ne pas inclure le jeu default de polyfill.io.

Pour une discussion en profondeur sur les polyfills et pourquoi polyfill.io est probablement une bonne idée, voir ce post . La version courte consiste à ne charger que les éléments dont le client a réellement besoin, en fonction de l'UA du navigateur.

Enfin, vous devrez tester votre application pour voir quelles fonctionnalités supplémentaires (le cas échéant) sont nécessaires pour une exécution réussie dans un navigateur donné. Vous devrez peut-être répéter ce processus plusieurs fois jusqu'à ce que toutes les erreurs disparaissent. Assurez-vous de tester plusieurs pages, car tous vos ensembles de pages n'auront pas les mêmes exigences.

Conclusion

Certains aspects de ce qui précède sont spécifiques à une application, mais espérons que cela peut vous aider à aller dans la bonne direction. La solution la plus importante à retenir est qu’il n’existe pas de solution unique à ce problème. Vous devez tout de même tester vos navigateurs cibles pour vérifier que le code s’exécute.

19
David Weldon

Vous pouvez également utiliser le module nuxt-polyfill .

  • Il prend en charge la détection de fonctionnalité avant de charger un fichier polyfill
  • Est compatible avec polyfill.io polyfill.
  • N'inclut pas les polyfill dans les ensembles par défaut.
  • Lazy charge les polyfills seulement si nécessaire
  • Retarde l'initialisation Nuxt si et seulement si des polyfill sont requis.
npm install nuxt-polyfill

Ajoutez le module à votre nuxt.config.js:

export default {

    // Configure polyfills:
    polyfill: {
        features: [
            /* 
                Feature without detect:

                Note: 
                  This is not recommended for most polyfills
                  because the polyfill will always be loaded, parsed and executed.
            */
            {
                require: 'url-polyfill' // NPM package or require path of file
            },

            /* 
                Feature with detect:

                Detection is better because the polyfill will not be 
                loaded, parsed and executed if it's not necessary.
            */
            {
                require: 'intersection-observer',
                detect: () => 'IntersectionObserver' in window,
            },

            /*
                Feature with detect & install:

                Some polyfills require a installation step
                Hence you could supply a install function which accepts the require result
            */
            {
                require: 'smoothscroll-polyfill',

                // Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
                detect: () => 'scrollBehavior' in document.documentElement.style && window.__forceSmoothScrollPolyfill__ !== true,

                // Optional install function called client side after the package is required:
                install: (smoothscroll) => smoothscroll.polyfill()
            }
        ]
    },

    // Add it to the modules section:
    modules: [
        'nuxt-polyfill',
    ]
}

Avertissement: je l'ai fait.

5
Tim

J'ai essayé toutes les approches ci-dessus et rien du tout n'a fonctionné. Cependant, j'ai découvert que je pouvais faire fonctionner mon code avec IE11 en créant un plugin et en l'ajoutant à nuxt.config.js comme suit:

// nuxt.config.js

  plugins: [
    { src: '~/plugins/polyfills', mode: 'client' },
  ],

// plugins/polyfills.js

import 'core-js/fn/object/entries'
import 'core-js/fn/array/includes'
import 'core-js/fn/array/find'
import 'core-js/fn/array/from'
import 'core-js/es6/promise'
import 'core-js/fn/object/assign'
import 'core-js/es6/symbol'
import 'whatwg-fetch'

J'ai enlevé toute configuration spéciale de babel. C'est tout ce qu'il a fallu. Je sais que cela signifie que mon code exécutera toujours les polyfill, mais il n'y a pas de dépendances tierces (polyfill.io par exemple). Vous pouvez éditer la liste des polyfills requis selon vos besoins. J'espère que cela aide quelqu'un!

1
Cliff Helsel