如何向 nuxt 2.0 添加 polyfill？

Question

在 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未定义，页面爆炸。

Answer 1

以下是我升级到 nuxt 2.2.0 并使用必要的 polyfill 使我的应用在 IE 11 上运行的步骤。您的体验可能会有所不同，具体取决于您安装的软件包。

步骤 1

从 nuxt.config.js 中删除 build.vendor 和 build.babel。

build.vendor 已弃用。我尝试将 build.babel 调整为 nuxt docs indicate it defaults to using vue-app. I think it's actually using babel-preset-env. This, along with other tools, depends on browserslist, which has some rational defaults. I didn't change my browserslist config, but you could by following their docs.

步骤 2

升级或更换任何导致构建问题的模块。当我升级时，@nuxtjs/apollo 由于其依赖项之一而出现转译问题。这一直是 resolved，但我最终切换到 vue-apollo + apollo-boost，因为它更适合我的项目。

步骤 3

为 core-js 未提供但目标浏览器需要的任何额外功能添加 polyfill。在对目标进行测试时，您应该能够根据控制台中抛出的任何异常来确定这些。

我通过将以下内容添加到 nuxt.config.js 使用 polyfill.io：

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

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

Note: I've included body: true which moves the script out of the head section of your page. It will, however, be inserted before any of your application code.

Note: IntersectionObserver is recommended for link prefetching.

您可以使用 builder 创建一个类似的 URL。请注意，一旦您 select 一个功能，构建器将自动 select default，这（据我所知）在功能上等同于 core-js 附带的 polyfill .因为 core-js 当前不是可选的（无论如何你都会发布它），所以不包括 polyfill.io.

中的 default 集是有意义的

有关 polyfill 的深入讨论以及为什么 polyfill.io 可能是个好主意，请参阅 this post。简短的版本是它根据浏览器的 UA 只加载客户端实际需要的东西。

最后，您需要测试您的应用程序以了解在给定浏览器中成功执行需要哪些附加功能（如果有）。您可能需要多次重复此过程，直到所有错误都消失。确保在多个页面上进行测试，因为并非所有页面包都具有相同的要求。

结论

虽然上面的某些方面是特定于应用程序的，但希望这可以帮助您朝着正确的方向前进。最重要的一点是，对此没有唯一的解决方案 - 您仍然需要在目标浏览器中进行测试以验证代码是否执行。

Answer 2

您也可以使用 nuxt-polyfill 模块。

它支持特性检测 在加载任何polyfill
与 polyfill.io polyfill 兼容。
默认包中不包含 polyfill。
仅在需要时延迟加载 polyfill
当且仅当需要 polyfill 时才延迟 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',
    ]
}

免责声明：我做到了。

Answer 3

我尝试了上述所有方法，但没有任何效果。但是，我发现我可以通过创建插件并将其添加到 nuxt.config.js 来让我的代码与 IE11 一起工作，如下所示：

// 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，但没有第三方依赖项（例如 polyfill.io）。您可以根据需要编辑所需的 polyfill 列表。希望这对某人有所帮助！

Answer 4

我用的是nuxt 2.x，修复很简单，你只需要在nuxt.config.js

中添加transpile

build: { transpile: ['vue-cli-plugin-apollo'] }

如何向 nuxt 2.0 添加 polyfill？

How to add a polyfill to nuxt 2.0?

nuxt.js

nuxt-edge

像以前一样使用供应商

使用polyfill.io