Experience Builder 1.8 の NPM パッケージ

NiklasKöhn

ExB 1.8 ウィジェットでいくつかの NPM パッケージを導入する際に、Webpack 5 が Node Core Modules のポリフィルを含まなくなったという問題に遭遇しました。これは「BREAKING CHANGE: webpack < 5 はデフォルトで node.js コアモジュールのポリフィルを含んでいました」というエラーメッセージに表れています。これは標準ドイツ語で言うと：<\/SPAN><\/DIV>node.js のコア機能を使用するパッケージは、Webpack 5 ではネイティブに動作しなくなりました。<\/STRONG><\/DIV> <\/DIV>説明を探していると、次の説明がもっともらしく思えました：「Webpack 4 はブラウザ内で多くの Node API を自動的にポリフィルしていました。これはあまり良いシステムではなく、意外に巨大なライブラリが誤ってアプリに取り込まれる可能性があり、使用しているポリフィルの正確なバージョンを制御できませんでした。 <\/SPAN>そのため Webpack 5 はこの機能を削除しました。」(出典)<\/SPAN><\/DIV> <\/DIV>対処法の説明は多数あり、コンソールのエラーメッセージや上記の出典にもあります：必要なソースは webpack.config の resolve.fallback に記入し、'npm i' でインストールする必要があります。<\/STRONG><\/DIV> <\/DIV>ここまでは良いのですが、この設定は ExB では分割されて複数ファイルに分散しています:
 <\/P>左から右へ：<\/SPAN><\/P>「client」ルートフォルダ内のwebpack.config.js<\/EM>がサブフォルダ「webpack」のwebpack-extensions.config.js<\/EM>を参照している<\/LI>webpack-extensions.config.js <\/EM>は参照先のwebpack-extensions.common.js<\/EM>から設定を組み立てている<\/LI>webpack-extensions.common.js<\/EM>には resolve<\/EM> オブジェクトが3箇所あり、具体的にはgetTemplatesWebpackConfig()、 <\/SPAN>getWidgetsWebpackConfig() と <\/SPAN>getThemesWebpackConfig()です。ここでプロパティ fallback<\/EM> が記入され、その内容は（他のプロパティ同様） webpack.common.js <\/EM> に記入されます。<\/SPAN><\/DIV><\/LI>webpack.common.js <\/EM>には最終的に「挿入される」パッケージへの参照が exports<\/SPAN>. <\/STRONG><\/EM>fallback.<\/EM> の下にあります。<\/DIV><\/LI><\/UL>これで動作します。<\/DIV> <\/DIV>問題なのは, 「client」フォルダのルートレベルにある Webpack ファイルがコードリポジトリ内になく、ExB と共に提供されていることです。ExB は独自の "exb-web-extension-repo" とマークされた Git リポジトリをマウントできるという利点があり、自分のソースコードだけをソース管理下に置けます（数年前に WebApp Builder プロジェクト用 Gulp を使って行っていたようなビルドプロセスへの無秩序なコピー操作なしで）. NPM パッケージでポリフィルが必要なものをカスタムウィジェットで使う場合、リポジトリにない Webpack 設定ファイルに手を加える必要があります。<\/STRONG> <\/DIV> <\/DIV>私の解決策: 私は自分のリポジトリ内に「_webpack5-config-updates」というサブフォルダを作成し、最初のコミットには元々提供されていた設定ファイルを含めました。次のコミットでは私の追加変更を行い、何が変わったか追跡できるようにしました。<\/DIV> <\/P><\/DIV>これは特に、それぞれ独自のポリフィルを必要とする複数のリポジトリを組み込む場合に重要です。その場合、設定ファイルを手動で確認し、必要なすべてのポリフィルを「client」フォルダ内の Webpack 設定に追加する必要があります。<\/DIV>これこそがこの解決策があまりスマートではない理由でもあります。 <\/DIV> <\/DIV>ここでアイデアがある方は、ぜひご連絡・議論ください！

<\/DIV>

 <\/P><\/DIV><\/DIV><\/DIV>

NiklasKöhn

Na gut, hier ist eine Idee. Um einfach wieder alle hinzuzufügen,  gibt es dieses Paket: https://www.npmjs.com/package/node-polyfill-webpack-plugin
Ich hab's nicht ausprobiert. Wer will?