web-dev-qa-db-ja.com

ポリフィルを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では、このすべてが壊れているようです。少なくとも、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が未定義になり、ページが爆発します。

nuxt.jsnuxt-edge
17
David Weldon

Nuxt 2.2.0にアップグレードし、必要なポリフィルを使用してIE 11でアプリを動作させるために行った手順は次のとおりです。インストールしたパッケージに応じて、エクスペリエンスが異なる場合があります。

ステップ1

build.vendorとbuild.babelをnuxt.config.jsから削除します。

build.vendorは非推奨です。 nuxt docs がデフォルトでbuild.babelを使用することを示しているため、vue-appを微調整しようとしました。実際には babel-preset-env を使用していると思います。これは、他のツールと一緒に、 browserslist に依存しています。これには、合理的な defaults があります。 browserslist configを変更しませんでしたが、 docs に従うことで可能です。

ステップ2

ビルドの問題の原因となっているモジュールをアップグレードまたは交換します。アップグレードしたとき、@nuxtjs/apolloの依存関係の1つを介してトランスパイルの問題が発生しました。以来、これは 解決済み でしたが、私のプロジェクトにより適していたため、vue-apollo + apollo-boostに切り替えました。

ステップ

core-jsでは提供されないが、ターゲットブラウザに必要な追加機能にポリフィルを追加します。ターゲットのテスト中にコンソールでスローされた例外に基づいてこれらを決定できるはずです。

次を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 },
  ],
},

注：ページのheadセクションからスクリプトを移動するbody: trueを含めました。ただし、挿入されるのはbefore任意のアプリケーションコードです。

注：IntersectionObserverは link prefetching に推奨されます。

builder を使用して、同様のURLを作成できます。機能を選択すると、ビルダーはdefaultを自動的に選択することに注意してください。これは、core-jsに同梱されているポリフィルと機能的に同等です（わかる限り）。 core-jsは現在オプションではないため（とにかく出荷する予定です）、polyfill.ioから設定されたdefaultを含めないことは理にかなっています。

ポリフィルの詳細な説明とpolyfill.ioがおそらく良いアイデアである理由については、 この投稿 を参照してください。短いバージョンでは、ブラウザのUAに基づいて、クライアントが実際に必要なもののみをロードします。

最後に、アプリをテストして、特定のブラウザーで正常に実行するために必要な追加機能（ある場合）を確認する必要があります。すべてのエラーがなくなるまで、このプロセスを数回繰り返す必要があります。すべてのページバンドルに同じ要件があるわけではないため、必ず複数のページでテストしてください。

結論

上記のいくつかの側面はアプリケーション固有ですが、うまくいけばこれが正しい方向にあなたを動かすのを助けることができます。最も重要なことは、これに対する解決策はないということです。コードが実行されることを確認するには、ターゲットブラウザーでテストする必要があります。

19
David Weldon

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'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',
    ]
}

免責事項：私はそれを作りました。

5
Tim

上記のすべてのアプローチを試しましたが、何も機能しませんでした。ただし、次のようにプラグインを作成して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.io）。必要に応じて、必要なポリフィルのリストを編集できます。これが誰かを助けることを願っています！

1
Cliff Helsel