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
は今は無視されているので、これは何もしないようです。
私は追加しようとしました:
script: [
{ src: 'https://cdn.polyfill.io/v2/polyfill.min.js' },
],
私のhead
に加えて:
render: {
resourceHints: false,
},
preload
ヒントを無効にします(これが重要かどうかわかりません)。これにより、ページが正しく表示されます-polyfill.min.js
は他のすべてのスクリプトの前にロードされます。どういうわけか、IE11でテストすると、Object.entries
が未定義になり、ページが爆発します。
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に基づいて、クライアントが実際に必要なもののみをロードします。
最後に、アプリをテストして、特定のブラウザーで正常に実行するために必要な追加機能(ある場合)を確認する必要があります。すべてのエラーがなくなるまで、このプロセスを数回繰り返す必要があります。すべてのページバンドルに同じ要件があるわけではないため、必ず複数のページでテストしてください。
結論
上記のいくつかの側面はアプリケーション固有ですが、うまくいけばこれが正しい方向にあなたを動かすのを助けることができます。最も重要なことは、これに対する解決策はないということです。コードが実行されることを確認するには、ターゲットブラウザーでテストする必要があります。
nuxt-polyfill モジュールを使用することもできます。
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',
]
}
免責事項:私はそれを作りました。
上記のすべてのアプローチを試しましたが、何も機能しませんでした。ただし、次のようにプラグインを作成して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)。必要に応じて、必要なポリフィルのリストを編集できます。これが誰かを助けることを願っています!