it-swarm-eu.dev

Come aggiungere un polyfill a nuxt 2.0?

In Nuxt 1.4.2, Nel mio nuxt.config.js:

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

Sembra che tutto ciò sia rotto in Nuxt 2.0. Almeno sto cercando il polyfill abbastanza per ottenere IE 11. funziona. Ecco cosa ho provato:

Usando il fornitore come una volta

Rimozione di build.babel ha permesso al processo di compilazione di funzionare:

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

Ma io pensabuild.vendor ora è semplicemente ignorato, quindi questo sembra non fare nulla.

Utilizzando polyfill.io

Ho provato ad aggiungere:

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

al mio head, insieme a:

render: {
  resourceHints: false,
},

per disabilitare i suggerimenti preload (non sono sicuro se questo è importante). Ciò si traduce in una pagina che sembra corretta - polyfill.min.js viene caricato prima di tutti gli altri script. In qualche modo, quando provo su ie11, Object.entries non è definito e la pagina esplode.

17
David Weldon

Ecco i passaggi che ho preso per eseguire l'aggiornamento a nuxt 2.2.0 e far funzionare la mia app su IE 11 con i polyfill necessari. La tua esperienza potrebbe differire, a seconda dei pacchetti installati.

Passaggio 1

Rimuovi build.vendor e build.babel a partire dal nuxt.config.js.

build.vendor è obsoleto. Ho provato a modificare build.babel, poiché nuxt docs indica per impostazione predefinita l'utilizzo di vue-app. Penso che stia effettivamente usando babel-preset-env . Questo, insieme ad altri strumenti, dipende da browserslist , che ha alcuni razionali valori predefiniti . Non ho modificato la configurazione del mio browser, ma puoi seguire la loro docs .

Passaggio 2

Aggiorna o sostituisci tutti i moduli che causano problemi di build. Quando ho eseguito l'upgrade, @nuxtjs/apollo ha avuto un problema di transpilazione tramite una delle sue dipendenze. Da allora questo è stato risolto , tuttavia ho finito per passare a vue-apollo + apollo-boost poiché si adattava meglio al mio progetto.

Passaggio 3

Aggiungi polyfill per eventuali funzionalità extra core-js non fornisce, ma è necessario il tuo browser di destinazione. Dovresti essere in grado di determinarli in base a eventuali eccezioni generate nella console durante il test sui target.

Ho usato polyfill.io aggiungendo quanto segue a 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 },
  ],
},

Nota: Ho incluso body: true che sposta lo script fuori dalla sezione head della tua pagina. Tuttavia, verrà inserito prima di qualsiasi codice dell'applicazione.

Nota: IntersectionObserver è consigliato per prefetching del link .

Puoi creare un URL simile usando builder . Nota che una volta selezionata una funzione, il builder selezionerà automaticamente default, che è (per quanto posso dire) funzionalmente equivalente ai polyfill forniti con core-js. Perché core-js non è attualmente facoltativo (lo spedirai comunque), ha senso non includere default impostato da polyfill.io.

Per una discussione approfondita dei polifilloli e perché polyfill.io è probabilmente una buona idea, vedi questo post . La versione breve è che carica solo le cose di cui il client ha effettivamente bisogno in base alla UA del browser.

Infine, dovrai testare la tua app per vedere quali funzionalità aggiuntive sono necessarie per l'esecuzione corretta in un determinato browser. Potrebbe essere necessario ripetere questo processo più volte fino a quando tutti gli errori scompaiono. Assicurati di provare su più pagine, poiché non tutti i gruppi di pagine avranno gli stessi requisiti.

Conclusione

Mentre alcuni aspetti di cui sopra sono specifici dell'applicazione, si spera che questo possa aiutarti a spostarti nella giusta direzione. La cosa più importante è che non esiste una soluzione a questo: dovrai comunque testare nei browser di destinazione per verificare che il codice venga eseguito.

19
David Weldon

Puoi anche usare il modulo nuxt-polyfill .

  • Supporta rilevamento funzionalità prima di caricare qualsiasi polyfill
  • È compatibile con polyfill.io polyfill.
  • Non include i polyfill nei bundle predefiniti.
  • Lazy carica i polyfill solo se necessario
  • Ritarda l'inizializzazione di Nuxt se e solo se sono richiesti polyfill.
npm install nuxt-polyfill

Aggiungi il modulo al tuo 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',
    ]
}

Disclaimer: ce l'ho fatta.

5
Tim

Ho provato tutti gli approcci di cui sopra e niente ha funzionato affatto. Tuttavia, ho scoperto che avrei potuto far funzionare il mio codice con IE11 creando un plug-in e aggiungendolo a nuxt.config.js come segue:

// 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'

Ho rimosso ogni speciale configurazione babel. Questo è tutto ciò che serve. So che questo significa che il mio codice eseguirà sempre i polyfill, ma non ci sono dipendenze di terze parti (polyfill.io per esempio). È possibile modificare l'elenco dei polyfill richiesti in base alle esigenze. Spero che questo aiuti qualcuno!

1
Cliff Helsel