Webpackによるサードパーティライブラリの導入方法と注意点（コード例）
この記事の内容は、webpack にサードパーティのライブラリを導入する方法と注意点 (コード例) についてです。必要な方は参考にしていただければ幸いです。
通常の状況では、npm 管理リポジトリでは見つからないサードパーティ ライブラリが使用されていることを心配する必要はありません。
jquery などの特定のライブラリが必要な場合は、npm install jquery スクリプト コマンドを直接実行して、このプロジェクトに必要な依存関係をインストールできます。
次に、jquery を使用してモジュール ファイルにインストールします。 , Import $ from 'jquery' または var $ = require('jquery') を渡して導入します。
これは、Webpack で構築されたプロジェクトにサードパーティ ライブラリを導入する一般的な方法です。
注: サンプル コードをよりわかりやすく説明するために、この例は、nodemon の記事に基づいています。
ただし、シナリオによっては、webpack によって構築されたプロジェクトにさまざまな要件があります。
プロジェクトのサイズが十分に小さい (cdn)
# # webapck の処理方法については、webapck - Minimizing the Build Output の記事を参照してください。 CDN などの非 Webapck 処理方法を使用します。 html-webpack-plugin を使用する場合、操作も非常に簡単です。特定の CDN (ブート CDN など) 上のサードパーティ ライブラリ (jquery など) をテンプレート ファイルに直接導入します。 template/index.html の参照コードは次のとおりです:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>third party</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </body> </html>
module.js で jquery を使用します。参照コードは次のとおりです。 ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">require('./module.css');
module.exports = function() {
$(document.body).append('<h1>hello webpack</h1>')
}</pre><div class="contentsignin">ログイン後にコピー</div></div>最後に、npm run test を実行します。ビルドが完了すると、背景に赤いページ効果とともに hello webpack という文字がブラウザに表示されます。
サードパーティ ライブラリを毎回使用しないようにするには、次のことが必要です。 import または require( ) を使用するとそれらが参照され、グローバル変数として定義できます。
webpack の ProvidePlugin の組み込みプラグインは、この問題を解決できます。詳しくはProvidePluginの紹介をご覧ください。
cdn によって参照される jquery との競合を避けるために、ここでは lodash が使用されます。
まず、lodash の依存関係をインストールします。コマンドは次のとおりです。
yarn add lodash --dev
次に、webpack.config.js に次のコードを追加します。
new webpack.ProvidePlugin({
_: 'lodash'
}),次に、モジュールに.js 次のコードを追加します:
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...最後に、npm run test script コマンドを実行します。ビルドが完了したら、ブラウザ ページに 1、2、3、4、5、6、~ を追加できます。 。
lodash の特定のツール関数 (_.concat、
など) をグローバルに使用できるように指定したい場合は、webapck.config.js を次のように変更します。コードは次のようになります。
...
new webpack.ProvidePlugin({
// _: 'lodash',
_concat: ['lodash', 'concat']
}),
...次に、module.js を変更します。コードは次のとおりです:
...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...プラグインを使用したくない場合は、import-loader の使用を検討することもできます。 、同じ目的を達成することもできます。
不必要な干渉を避けるために、アンダースコアを使用してデモを行うことができます。
最初に、imports-loader の依存関係をインストールします。コマンドは次のとおりです。
yarn add imports-loader --dev
次に、アンダースコアの依存関係をインストールします。コマンドは次のとおりです。
yarn add underscore
2 番目に、 webapck.config.js に次のコードを追加します。
...
module: {
rules: [
{
test: require.resolve('underscore'),
use: 'imports-loader?_=underscore'
},
...
]
},
...注: アンダースコアと lodash はどちらもシングルトン モデルを使用して開発されており、区別するために、インスタンス化されたコンストラクターの名前はどちらも _ です。変更する必要があります。 imports-loader でこのロゴのエイリアスを設定するのは少し難しいですが、provide-plugin ではこの問題がなく、パーソナライズされたエイリアスを設定できます。
webpack.config.js を変更します。コードは次のとおりです。
new webpack.ProvidePlugin({
// _: 'lodash',
// _concat: ['lodash', 'concat'],
__: 'lodash'
}),__ として定義された lodash と underscore_ を区別できます。
次に、module.js を変更します。コードは次のとおりです。
...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...最後に、すべてのファイルを保存すると、ブラウザで同様の結果が表示されます (保存後、nodemon が自動的に起動します)ブラウザ）。
cdn と外部機能以前、外部機能に関するいくつかの問題に遭遇しました。多くの人がその用途を理解していないため、なぜ詳しく説明する必要があるのでしょうか。 。
シーンの再現:
以前、jquery を使用したプロジェクトがありました。このライブラリは比較的古典的なため、アプリケーションのさまざまなモジュールで頻繁に参照されます。使用方法は次のとおりです。
import $ from 'jquery'
または
var $ = require('jquery')その結果、ビルド完了後のファイルは比較的大きくなります。次に、上で説明したように、CDN の使用を検討してください。この方法では、インポートまたは必要な参照を削除し、インストールされている jquery の依存関係を削除する必要があります。ただし、プロジェクトの構造が比較的乱雑であり、モジュールが多いため、変更が少ない、または見逃されるという問題が発生します。アプリケーションエラー。それについて私たちは何ができるでしょうか？
jquery の依存関係を削除しないと cdn を使用する意味がなくなるという意見もあります。外部を使用すると、この問題を解決できます。
次のコードを module.js ファイルに追加できます:
...
var $ = require('jquery')
...次に、ファイルを保存すると、ビルド出力に次のエラーが表示されることがわかります:
ERROR in ./module.js Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1' @ ./module.js 3:0-23 @ ./main.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js
inモジュール module.js jquery を解析できません。
次に、次のコードを webpack.config.js に追加します。
externals: {
jquery: 'jQuery',
jquery: '$'
},ここで、jquery は require('jquery') 内の jquery を表し、jQuery と $ は jquery を表します。ライブラリ自体がインスタンス化識別子を提供します。 。他のライブラリの CDN 化、jquery と同様の変更。
ただし、プロジェクトの最初に cdn を使用する場合は、jquery を使用するモジュールで var $ = require('jquery') または import $ from 'jquery' を使用しないでください。ただし、これによって問題が発生することはありません。エラーですが、何らかの理由で後で jquery 依存関係が導入される可能性がある場合は、 var $ = require('jquery') または import $ from 'jquery'; を使用する必要があります。
以上がWebpackによるサードパーティライブラリの導入方法と注意点（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7566
15
1386
52
87
11
28
105
PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ
Mar 16, 2024 pm 12:09 PM
PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ 今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。
フロントエンドの面接官からよく聞かれる質問
Mar 19, 2024 pm 02:24 PM
フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメイン リクエスト、フロントエンド エンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。
C# 開発経験の共有: フロントエンドとバックエンドの共同開発スキル
Nov 23, 2023 am 10:13 AM
C# 開発者としての私たちの開発作業には、通常、フロントエンドとバックエンドの開発が含まれますが、テクノロジーが発展し、プロジェクトが複雑になるにつれて、フロントエンドとバックエンドの共同開発はますます重要かつ複雑になってきています。この記事では、C# 開発者が開発作業をより効率的に完了できるようにする、フロントエンドとバックエンドの共同開発テクニックをいくつか紹介します。インターフェイスの仕様を決定した後、フロントエンドとバックエンドの共同開発は API インターフェイスの相互作用から切り離せません。フロントエンドとバックエンドの共同開発をスムーズに進めるためには、適切なインターフェース仕様を定義することが最も重要です。インターフェイスの仕様にはインターフェイスの名前が含まれます
Django はフロントエンドですか、バックエンドですか?それをチェックしてください！
Jan 19, 2024 am 08:37 AM
Django は、迅速な開発とクリーンなメソッドを重視した Python で書かれた Web アプリケーション フレームワークです。 Django は Web フレームワークですが、Django がフロントエンドなのかバックエンドなのかという質問に答えるには、フロントエンドとバックエンドの概念を深く理解する必要があります。フロントエンドはユーザーが直接対話するインターフェイスを指し、バックエンドはサーバー側プログラムを指し、HTTP プロトコルを通じてデータと対話します。フロントエンドとバックエンドが分離されている場合、フロントエンドとバックエンドのプログラムをそれぞれ独立して開発して、ビジネス ロジックとインタラクティブ効果、およびデータ交換を実装できます。
Go 言語のフロントエンド テクノロジーの探求: フロントエンド開発の新しいビジョン
Mar 28, 2024 pm 01:06 PM
Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザー インターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。
フロントエンドにインスタントメッセージングを実装する方法
Oct 09, 2023 pm 02:47 PM
インスタント メッセージングを実装する方法には、WebSocket、ロング ポーリング、サーバー送信イベント、WebRTC などが含まれます。詳細な紹介: 1. クライアントとサーバーの間に永続的な接続を確立してリアルタイムの双方向通信を実現できる WebSocket フロントエンドは WebSocket API を使用して WebSocket 接続を作成し、送受信によるインスタント メッセージングを実現できます。 2. Long Polling（リアルタイム通信を模擬する技術）など
Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。
Jan 19, 2024 am 08:52 AM
Django: フロントエンド開発とバックエンド開発の両方を処理できる魔法のフレームワークです。 Django は、効率的でスケーラブルな Web アプリケーション フレームワークです。 MVCやMTVなど複数のWeb開発モデルをサポートし、高品質なWebアプリケーションを簡単に開発できます。 Django はバックエンド開発をサポートするだけでなく、フロントエンド インターフェイスを迅速に構築し、テンプレート言語を通じて柔軟なビュー表示を実現します。 Django はフロントエンド開発とバックエンド開発をシームレスに統合するため、開発者は学習に特化する必要がありません。
Golang とフロントエンド テクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たすかを探る
Mar 19, 2024 pm 06:15 PM
Golang とフロントエンド テクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たしているかを調べるには、具体的なコード例が必要です。インターネットとモバイル アプリケーションの急速な発展に伴い、フロントエンド テクノロジーの重要性がますます高まっています。この分野では、強力なバックエンド プログラミング言語としての Golang も重要な役割を果たします。この記事では、Golang がどのようにフロントエンド テクノロジーと組み合わされるかを検討し、具体的なコード例を通じてフロントエンド分野での可能性を実証します。フロントエンド分野における Golang の役割は、効率的で簡潔かつ学びやすいものとしてです。
