Как добавить полифилл в nuxt 2.0? - PullRequest
Новая
       15

Как добавить полифилл в nuxt 2.0?

0 голосов
/ 22 сентября 2018

В Nuxt 1.4.2 в моем nuxt.config.js было следующее: 

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

Кажется, что все это нарушено в Nuxt 2.0.Как минимум я смотрю на polyfill достаточно для работы IE 11.Вот что я попробовал:

Использование поставщика, как я привык к

Удаление build.babel позволило запустить процесс сборки: 

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

Но я думаю, что build.vendor сейчас просто игнорируется, так что, похоже, это ничего не делает.

Использование polyfill.io

Я попытался добавить: 

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

к моемуhead вместе с: 

render: {
  resourceHints: false,
},

для отключения подсказок preload (я не уверен, имеет ли это значение).В результате получается страница, которая выглядит правильно - polyfill.min.js загружается раньше всех других сценариев.Каким-то образом, когда я тестирую на ie11, Object.entries не определено, и страница взрывается.

Ответы [ 3 ]

0 голосов
/ 16 марта 2019

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

  • Он поддерживает функцию обнаружения перед загрузкой любого полифайла
  • Совместим с polyfill.io polyfills.
  • Не включает polyfill в пакеты по умолчанию.
  • Lazy загружает 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'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',
    ]
}

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

0 голосов
/ 17 августа 2019

Я перепробовал все вышеперечисленные подходы и ничего не получалось.Однако я обнаружил, что могу заставить свой код работать с 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).При необходимости вы можете редактировать список необходимых полифилов.Надеюсь, это кому-нибудь поможет!

0 голосов
/ 19 октября 2018

Вот шаги, которые я предпринял, чтобы перейти на 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 .Это, наряду с другими инструментами, зависит от browserslist , который имеет некоторые рациональные значения по умолчанию .Я не изменил конфигурацию списка браузеров, но вы могли бы, следуя их документам .

Шаг 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 вашей страницы.Однако он будет вставлен до любого кода вашего приложения.

Примечание: IntersectionObserver рекомендуется для предварительной выборки ссылки .

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

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

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

Заключение

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

...