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

В 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 не определено, и страница взрывается.

Источник

4 ответа

Решение

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

Шаг 1

Удалить build.vendor а также build.babel от nuxt.config.js,

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

Шаг 2

замещать @nuxtjs/apollo с vue-apollo + apollo-boost,

@nuxtjs/apollo В настоящее время возникают проблемы с транспиляцией с nuxt 2, как описано в этом выпуске. В моем случае, используя vue-apollo Это был разумный выбор, потому что у меня есть цель сборки SPA.

Шаг 3

Я использовал https://polyfill.io/, добавив следующее в nuxt.config.js:

head: {
  script: [
    { src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Object.entries' },
  ],
},

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

Обратите внимание, что если вы посмотрите на список возможностей, вы увидите, что в набор по умолчанию включены только подмножества. Любые обязательные функции без пометок должны быть добавлены в URL вручную (вместе с default). В моем случае, fetch а также Object.entries были необходимы для IE 11, чтобы запустить мое приложение.

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

Компромиссы

  • polyfill.io это блокирующий скрипт
  • Будут переданы функции, которые уже предоставлены core-js

Заключение

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

Источник

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

  • Он поддерживает функцию обнаружения перед загрузкой любого заполнения
  • Совместим с http://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'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',
    ]
}

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

Источник

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

// nuxt.config.js

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

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

Источник

я использую nuxt 2.x, и исправить это довольно просто, вам просто нужно добавить транспайл в nuxt.config.js

      build: { transpile: ['vue-cli-plugin-apollo'] }
Источник
Другие вопросы по тегам