Как добавить polyfill в nuxt 2.0?

Ответ 1

Вот шаги, которые я предпринял, чтобы перейти на nuxt 2.2.0 и заставить мое приложение работать на IE 11 с необходимыми полифилами. Ваш опыт может отличаться в зависимости от того, какие пакеты вы установили.

Шаг 1

Удалите build.vendor и build.babel из nuxt.config.js.

build.vendor устарела. Я попытался настроить build.babel, так как nuxt docs указывает, что по умолчанию используется vue-app. Я думаю, что это на самом деле с помощью babel-preset-env. Это, наряду с другими инструментами, зависит от списка браузеров, который имеет некоторые рациональные значения по умолчанию. Я не изменил свою конфигурацию списка браузеров, но вы могли бы, следуя их документам.

Шаг 2

Обновите или замените любые модули, вызывающие проблемы со сборкой. Когда я обновился, у @nuxtjs/apollo была проблема с транспиляцией через одну из его зависимостей. С тех пор это было решено, однако в итоге я переключился на vue-apollo + apollo-boost, так как он лучше подходил для моего проекта.

Шаг 3

Добавить полифиллы для любых дополнительных функций core-js не предоставляет, но они нужны вашим целевым браузерам. Вы должны быть в состоянии определить их на основе любых исключений, выданных в консоли во время тестирования ваших целей.

Я использовал polyfill.io, добавив в 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 },
  ],
},

Примечание: Я включил body: true, который перемещает скрипт из раздела head вашей страницы. Однако он будет вставлен перед любым кодом вашего приложения.

Note: IntersectionObserver is recommended for link prefetching.

Вы можете создать похожий URL с помощью builder. Обратите внимание, что как только вы выберете объект, сборщик автоматически выберет default, который (насколько я могу судить) функционально эквивалентен поли заливкам, которые поставляются с core-js. Поскольку core-js в настоящее время не является обязательным (вы все равно его отправите), имеет смысл не включать набор default из polyfill.io.

Подробное обсуждение полизаполнений и того, почему polyfill.io, вероятно, хорошая идея, см. в этом посте. Короче говоря, он загружает только то, что действительно нужно клиенту, на основе браузера UA.

Наконец, вам нужно протестировать ваше приложение, чтобы увидеть, какие дополнительные функции (если таковые имеются) необходимы для успешного выполнения в данном браузере. Возможно, вам придется повторить этот процесс несколько раз, пока все ошибки не исчезнут. Обязательно проведите тестирование на нескольких страницах, поскольку не все ваши пакеты страниц будут иметь одинаковые требования.

Заключение

Хотя некоторые аспекты вышеперечисленного зависят от конкретного приложения, надеюсь, это поможет вам двигаться в правильном направлении. Наиболее важный вывод заключается в том, что единого решения для этого нет - вам все равно нужно будет протестировать в целевых браузерах, чтобы убедиться, что код выполняется.

Ответ 2

Вы также можете использовать модуль nuxt-polyfill.

• Он поддерживает функцию обнаружения перед загрузкой любого полифилла
• Совместим с polyfill.io polyfills.
• Не включает полифиллы в пакеты по умолчанию.
• Ленивый загружает полифилы только при необходимости
• Задерживает инициализацию Nuxt тогда и только тогда, когда требуются полифилы.

npm install nuxt-polyfill

Добавьте модуль в свой 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 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',
    ]
}

Отказ от ответственности: я сделал это.

Ответ 3

Я перепробовал все вышеперечисленные подходы и ничего не получалось. Однако я обнаружил, что могу заставить свой код работать с IE11, создав плагин и добавив его в nuxt.config.js следующим образом:

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

Я удалил все специальные настройки Babel. Это все, что потребовалось. Я знаю, это означает, что мой код всегда будет запускать полифилы, но нет никаких сторонних зависимостей (например, polyfill.io). При необходимости вы можете редактировать список необходимых полифилов. Надеюсь, это поможет кому-то!