webentwicklung-frage-antwort-db.com.de

Wie füge ich eine Polyfüllung zu nuxt 2.0 hinzu?

In Nuxt 1.4.2 Hatte ich Folgendes in meinem nuxt.config.js:

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

All dies scheint in Nuxt 2.0 Kaputt zu sein. Zumindest versuche ich so viel Polyfill zu erzeugen, dass IE 11 funktioniert. Ich habe Folgendes versucht:

Verwendung des Anbieters wie früher

Durch das Entfernen von build.babel Funktionierte der Erstellungsprozess:

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

Aber ich denke nachbuild.vendor Wird jetzt einfach ignoriert, daher scheint dies nichts zu bewirken.

Polyfill.io verwenden

Ich habe versucht hinzuzufügen:

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

an mein head, zusammen mit:

render: {
  resourceHints: false,
},

um die preload Hinweise zu deaktivieren (ich bin mir nicht sicher, ob dies wichtig ist). Dies führt zu einer Seite, die korrekt aussieht - polyfill.min.js Wird vor allen anderen Skripten geladen. Irgendwie ist beim Testen auf ie11 Object.entries Undefiniert und die Seite explodiert.

nuxt.jsnuxt-edge
17
David Weldon

Hier sind die Schritte, die ich unternommen habe, um ein Upgrade auf nuxt 2.2.0 Durchzuführen und meine App mit den erforderlichen Polyfills auf IE 11) zu bringen Eingerichtet.

Schritt 1

Entfernen Sie build.vendor Und build.babel Aus nuxt.config.js.

build.vendor Ist veraltet. Ich habe versucht, build.babel Zu optimieren, da nuxt docs standardmäßig vue-app Verwendet. Ich denke, es verwendet tatsächlich Babel-Preset-Env . Dies hängt zusammen mit anderen Tools von Browserliste ab, das einige rationale Standardeinstellungen hat. Ich habe die Konfiguration meiner Browserliste nicht geändert, aber Sie können den folgenden Anweisungen folgen: docs .

Schritt 2

Aktualisieren oder ersetzen Sie alle Module, die Buildprobleme verursachen. Beim Upgrade hatte @nuxtjs/apollo Ein Transpilationsproblem über eine seiner Abhängigkeiten. Dies ist seitdem behoben , aber ich bin zu vue-apollo + apollo-boost Gewechselt, da es besser zu meinem Projekt passt.

Schritt 3

Fügen Sie Polyfills für zusätzliche Funktionen hinzu, die core-js Nicht bietet, die Ihre Zielbrowser jedoch benötigen. Sie sollten in der Lage sein, diese anhand von Ausnahmen zu ermitteln, die während des Testens auf Ihren Zielen in der Konsole ausgelöst wurden.

Ich habe polyfill.io verwendet, indem ich Folgendes zu nuxt.config.js Hinzugefügt habe:

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

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

Hinweis: Ich habe body: true Eingefügt, mit dem das Skript aus dem Abschnitt head Ihrer Seite verschoben wird. Es wird jedoch vor Ihrem Anwendungscode eingefügt.

Hinweis: IntersectionObserver wird für Link Prefetching empfohlen.

Sie können eine ähnliche URL erstellen, indem Sie builder verwenden. Beachten Sie, dass der Builder nach Auswahl eines Features automatisch default auswählt, was (soweit ich das beurteilen kann) funktional den Polyfills entspricht, die mit core-js Geliefert werden. Da core-js Derzeit nicht optional ist (Sie werden es trotzdem ausliefern), ist es sinnvoll, den default -Satz von polyfill.io Nicht einzuschließen.

Eine ausführliche Diskussion über Polyfüllungen und warum polyfill.io Wahrscheinlich eine gute Idee ist, finden Sie unter dieser Beitrag . In der Kurzversion wird nur das geladen, was der Client basierend auf der Benutzeroberfläche des Browsers tatsächlich benötigt.

Schließlich müssen Sie Ihre App testen, um festzustellen, welche zusätzlichen Funktionen (falls vorhanden) für eine erfolgreiche Ausführung in einem bestimmten Browser erforderlich sind. Möglicherweise müssen Sie diesen Vorgang mehrmals wiederholen, bis alle Fehler behoben sind. Stellen Sie sicher, dass Sie auf mehreren Seiten testen, da nicht alle Seitenbündel die gleichen Anforderungen haben.

Fazit

Einige der oben genannten Aspekte sind zwar anwendungsspezifisch, dies kann Ihnen jedoch hoffentlich dabei helfen, die richtige Richtung einzuschlagen. Das Wichtigste ist, dass es keine Lösung dafür gibt - Sie müssen immer noch in Ihren Zielbrowsern testen, um zu überprüfen, ob der Code ausgeführt wird.

19
David Weldon

Sie können auch das Modul nuxt-polyfill verwenden.

  • Es unterstützt die Feature-Erkennung vor dem Laden einer Polyfill
  • Ist kompatibel mit polyfill.io polyfills.
  • Enthält die Polyfills nicht in Standardbündeln.
  • Lazy lädt Polyfills nur bei Bedarf
  • Verzögert die Nuxt-Initialisierung genau dann, wenn Polyfills erforderlich sind.
npm install nuxt-polyfill

Fügen Sie das Modul zu Ihrer Datei nuxt.config.js hinzu:

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',
    ]
}

Haftungsausschluss: Ich habe es geschafft.

5
Tim

Ich habe alle oben genannten Ansätze ausprobiert und nichts hat funktioniert. Es stellte sich jedoch heraus, dass ich meinen Code mit IE11 zum Laufen bringen konnte, indem ich ein Plugin erstellte und es wie folgt zu nuxt.config.js hinzufügte:

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

Ich habe eine spezielle Babel-Konfiguration entfernt. Das war alles was es brauchte. Ich weiß, dass mein Code immer die Polyfills ausführt, aber es gibt keine Abhängigkeiten von Drittanbietern (zum Beispiel polyfill.io). Sie können die Liste der erforderlichen Polyfills nach Bedarf bearbeiten. Hoffe das hilft jemandem!

1
Cliff Helsel