如何向nuxt 2.0添加polyfill? [英] How to add a polyfill to nuxt 2.0?

问题描述

在 Nuxt 1.4.2 中，我的 nuxt.config.js 中有以下内容:

构建:{供应商:['babel-polyfill']，巴别:{预设:[['vue-app', {useBuiltIns: 真,目标:{ 即:11，丑化:真}，},],],},},

似乎所有这些都在 Nuxt 2.0 中被破坏了.至少，我希望 polyfill 足以让 IE 11 正常工作.这是我尝试过的:

像以前一样使用供应商

删除 build.babel 允许构建过程工作:

构建:{供应商:['babel-polyfill']，},

但我认为 build.vendor 现在只是被忽略了，所以这似乎什么也没做.

使用 polyfill.io

我尝试添加:

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

到我的head，以及:

渲染:{资源提示:假，},

禁用 preload 提示(我不确定这是否重要).这会导致页面看起来正确 - polyfill.min.js 在所有其他脚本之前加载.不知何故，当我在 ie11 上测试时，Object.entries 未定义并且页面爆炸.

解决方案

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

第一步

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

build.vendor 已弃用.我试图调整 build.babel，作为 nuxt docs表明它默认使用 vue-app.我认为它实际上是在使用 babel-preset-env.这与其他工具一起取决于 browserslist，它具有一些合理的 默认值.我没有更改我的浏览器列表配置，但您可以按照他们的 docs 进行操作.

第 2 步

升级或替换导致构建问题的任何模块.当我升级时，@nuxtjs/apollo 通过其依赖项之一出现了转译问题.这已经解决，但我最终切换到了vue-apollo + apollo-boost 因为它更适合我的项目.

步骤 3

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

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

const features = ['拿来'，'Object.entries','路口观察员',].join('%2C');头: {脚本: [{ src: `https://polyfill.io/v3/polyfill.min.js?features=${features}`, body: true },],},

<块引用>

注意:我已经包含了 body: true，它将脚本移出页面的 head 部分.但是，它将被插入在您的任何应用程序代码之前.

注意: IntersectionObserver 推荐用于 链接预取.

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

有关 polyfill 的深入讨论以及为什么 polyfill.io 可能是一个好主意，请参阅 这篇文章.简而言之，它根据浏览器的 UA 仅加载客户端实际需要的内容.

最后，您需要测试您的应用以查看在给定浏览器中成功执行需要哪些附加功能(如果有).您可能需要多次重复此过程，直到所有错误消失.请务必在多个页面上进行测试，因为并非所有页面包都具有相同的要求.

结论

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

In Nuxt 1.4.2, I had the following in my nuxt.config.js:

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

It seems that all of this is broken in Nuxt 2.0. At a minimum I'm looking to polyfill enough to get IE 11 working. Here's what I've tried:

Using vendor as I used to

Removing build.babel allowed the build process to work:

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

But I think build.vendor is just ignored now, so this seems to do nothing.

Using polyfill.io

I tried adding:

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

to my head, along with:

render: {
  resourceHints: false,
},

to disable the preload hints (I'm unsure if this matters). This results in a page which looks correct - polyfill.min.js is loaded before all other scripts. Somehow, when I test on ie11, Object.entries is undefined and the page explodes.

解决方案

Here are the steps I took to upgrade to nuxt 2.2.0, and get my app working on IE 11 with the necessary polyfills. Your experience may differ, depending on which packages you have installed.

Step 1

Remove build.vendor and build.babel from nuxt.config.js.

build.vendor is deprecated. I tried to tweak build.babel, as the 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.

Step 2

Upgrade or replace any modules causing build issues. When I upgraded, @nuxtjs/apollo had a transpilation problem via one of its dependencies. This has since been resolved, however I ended up switching to vue-apollo + apollo-boost as it was a better fit for my project.

Step 3

Add polyfills for any extra features core-js doesn't provide, but that your target browsers need. You should be able to determine these based on any exceptions thrown in the console while testing on your targets.

I used polyfill.io by adding the following to 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 },
  ],
},

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.

You can create a similar URL by using the builder. Note that once you select a feature, the builder will automatically select default, which is (as far as I can tell) functionally equivalent to the polyfills that ship with core-js. Because core-js isn't currently optional (you're going to ship it anyway), it makes sense not to include the default set from polyfill.io.

For an in-depth discussion of polyfills and why polyfill.io is probably a good idea, see this post. The short version is that it loads only the stuff the client actually needs based on the browser's UA.

Finally, you'll need to test your app to see which additional features (if any) are needed for successful execution in a given browser. You may need to repeat this process several times until all of the errors go away. Make sure to test on multiple pages, as not all of your page bundles will have the same requirements.

Conclusion

While some aspects of the above are application-specific, hopefully this can help move you in the right direction. The most important takeaway is that there's no one solution to this - you'll still need to test in your target browsers to verify that the code executes.

这篇关于如何向nuxt 2.0添加polyfill?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！