JavaScript - vue での cdn の使用についてアドバイスを求める

Question

＃＃＃教えて下さい、＃＃＃ リーリー

cdn を使用してこのようなパブリック js ファイルを参照する方法。現在、npm install によってインストールされ、すべてローカルで、エクスポートは制限されていますが、多くのパッケージは cdn を使用してインポートできます。しかし現状では全てVueフレームワークで動作しており、HTMLから直接インポートした記述場所はありません。プロジェクトで https://cdn.bootcss.com/eleme... のようなパブリック CDN を使用する方法を教えてください。

Answer 1

リーリー

Webpackはこのように構成されており、HTMLはcdnのjqueryを導入しています

リーリー

Answer 2

直接インポートするだけですhtml 里中 从 CDN、インポートして一緒にパッケージ化/圧縮する必要はありません

Answer 3

サードパーティ ライブラリに CDN アドレスがある場合は、テンプレートの HTML で HTML に直接導入できます。
その後、コードを独自の cdn にスローし、それを均一に管理し、他の静的ファイルと同じ方法で処理することもできます。たとえば、img ファイルは cdnUrl+projectName/img/ に配置されます。パーティーライブラリもそこにスローされます。
現在ローカルではnpmパッケージで管理しているので、引用時にインポートすると必ずwebpackでパッケージ化されることになります… これにはwebpackの問題が関係します。まずは現在の問題を解決できるか見てみましょう

Answer 4

jQuery を例として、非常に詳しく説明されている webpack ドキュメントを参照してください。

https://doc.webpack-china.org...

Answer 5

問題を解決するには、次の手順が必要です
1. npm によってローカルにインストールされ、インポートを通じて導入された js ファイルを抽出します。この部分は、webpack コードの分離を参照してください。

例:

リーリー

2. JSパッケージ化後のパスとファイル名の問題を解決するにはHtmlWebpackPluginを使用します

リーリー リーリー リーリー

最終的に生成されたエフェクトは次のようになります

リーリー

問題は主に、上記のパブリック js ファイルの抽出にあります。抽出後、HtmlWebpackPlugin を使用してリソース パスを自動的に追加するか手動で追加するかは個人的な選択であるため、最初のステップに重点が置かれます