webpack モジュラー管理およびパッケージ化ツールの使用方法

今回は、webpack モジュラー管理およびパッケージ化ツールの使用方法と、webpack モジュラー管理およびパッケージ化ツールを使用する際の 注意事項 を​​説明します。実際の事例を見てみましょう。

Webpack の紹介

webpack は、現在最も人気のあるフロントエンド リソースのモジュラー管理およびパッケージ化ツールです。 依存関係とルールに従って、実稼働環境の展開に適したフロントエンド リソースに多くの緩いモジュールをパッケージ化できます。オンデマンドでロードされるモジュールのコードを分離し、実際に必要なときに非同期でロードすることもできます。ローダー変換により、CommonJs モジュール、AMD モジュール、ES6 モジュール、CSS、画像、JSON、Coffeescript、LESS など、あらゆる形式のリソースをモジュールとみなすことができます。

モジュール システム<script> タグの進化<p style="text-align: left;"><pre class="brush:php;toolbar:false"><script src="module1.js"></script> <script></script> <script></script> <script></script>これは、各ファイルがモジュールと見なされる場合、通常、そのインターフェイスはグローバル スコープで公開されます。 window オブジェクトでは、異なるモジュールのインターフェイス呼び出しが同じスコープ内にあります。一部の複雑なフレームワークでは、名前空間の概念を使用してこれらのモジュールのインターフェイスを編成します。典型的な例は YUI ライブラリです。

この独自の読み込み方法には、明らかな欠点がいくつかあります。

グローバル スコープで変数の競合が発生しやすいです

ファイルは <script> の書き込み順序でのみ読み込むことができます <ol class=" list-paddingleft-2"><li><p style="text-align: left;"> 開発者の依存関係モジュールとコードベース間の問題は主観的に解決する必要があります<li><p style="text-align: left;">大規模なプロジェクトでは、さまざまなリソースの管理が難しく、長期にわたって蓄積された問題によりコードベースが混乱します<li><p style="text-align: left;"><li>CommonJS仕様<p style="text-align: left;">CommonJSつまり、サーバー環境やデスクトップ環境など、サーバー環境の外側に JavaScript エコシステムを構築するという目標を持ってプロジェクトを参照していることになります。 <p style="text-align: left;"><span style="color: #ff0000"> CommonJS 仕様は、JavaScript のスコープ問題を解決するために定義されたモジュール形式であり、各モジュールが独自の名前空間で実行できるようにします。この仕様の主な内容は、モジュールが module.exports を通じて外部変数またはインターフェイスをエクスポートし、require() を通じて他のモジュールの出力を現在のモジュール スコープにインポートする必要があるということです。 <strong>直感的な例<pre class="brush:php;toolbar:false">// moduleA.js module.exports = function( value ){ return value * 2; } // moduleB.js var multiplyBy2 = require(&#39;./moduleA&#39;); var result = multiplyBy2(4);<p style="text-align: left;">AMD仕様<p style="text-align: left;"><p style="text-align: left;">AMD (非同期モジュール定義) はブラウザ環境向けに設計されています。これは、CommonJS モジュール システムが同期的にロードされ、現在のブラウザ環境は同期ロードの準備ができていないためです。 モジュール条件。 <p style="text-align: left;"><span style="color: #ff0000">モジュールは、define 関数を使用してクロージャ内で次の形式で定義されます: <strong><pre class="brush:php;toolbar:false">define(id?: String, dependencies?: String[], factory: Function|Object);id はモジュールの名前であり、オプションのパラメーターです。 factory は最後のパラメータで、関数またはオブジェクトであるモジュールの特定の実装をラップします。関数の場合、その戻り値は出力インターフェイスまたはモジュールの値です。 <p style="text-align: left;">いくつかの使用例<p style="text-align: left;"> jQuery モジュールに依存する myModule という名前のモジュールを定義します。 <p style="text-align: left;"><pre class="brush:php;toolbar:false">define(&#39;myModule&#39;, [&#39;jquery&#39;], function($) { // $ 是 jquery 模块的输出 $(&#39;body&#39;).text(&#39;hello world&#39;); }); // 使用 require([&#39;myModule&#39;], function(myModule) {}); 注: Webpack では、モジュール名はローカル スコープのみを持ちます。Require.js では、モジュール名はグローバル スコープを持ち、グローバル スコープを持ちます。世界中で使用されています。 <p style="text-align: left;">通常、アプリケーションの起動関数として使用される、ID 値のない匿名モジュールを定義します。<p style="text-align: left;"><pre class="brush:php;toolbar:false">define([&#39;jquery&#39;], function($) { $(&#39;body&#39;).text(&#39;hello world&#39;); });AMD もモジュールをロードするために require() ステートメントを使用しますが、CommonJS とは異なり、2 つのパラメーターが必要です<p style="text-align: left;">最初のパラメーター [ module] は配列であり、内部のメンバーはロードされるモジュールです。2 番目のパラメーター callback は、ロードが成功した後の <p style="text-align: left;">コールバック関数 です。前のコードを AMD 形式に書き直すと、次のようになります: <p style="text-align: left;">math.add() と math モジュールの読み込みは同期されず、ブラウザはフリーズしません。したがって、明らかに、AMD はブラウザ環境に適しています。現在、AMD 仕様を実装する 2 つの主要な Javascript ライブラリは、 require.js とcurl.js です。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。 <p style="text-align: left;"><p style="text-align: left;">Webpack 的特点<ol class=" list-paddingleft-2"><li><p style="text-align: left;">代码拆分<li><p style="text-align: left;">Loader<li><p style="text-align: left;">智能解析<li><p style="text-align: left;">插件系统<li><p style="text-align: left;">快速运行<p style="text-align: left;"><span style="color: #ff0000"><strong>webpack<a href="http://www.php.cn/php/php-tp-reactor.html" target="_blank">基本使用<p style="text-align: left;"><a href="http://www.php.cn/code/7430.html" target="_blank">创建项目根目录<p style="text-align: left;">初始化<pre class="brush:php;toolbar:false">npm init 或 npm init -y<p style="text-align: left;">全局安装<pre class="brush:php;toolbar:false">npm install webpack -g<p style="text-align: left;">局部安装,在项目目录下安装<pre class="brush:php;toolbar:false">npm install webpack --save-dev<p style="text-align: left;">--save: 将安装的包的信息保存在package中<p style="text-align: left;">--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件<p style="text-align: left;">如果使用web开发工具,单独安装<pre class="brush:php;toolbar:false">npm install webpack-dev-server --save-dev<p style="text-align: left;"><strong>基本使用<p style="text-align: left;">首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：<pre class="brush:php;toolbar:false"><!-- index.html --> <html> <head> <meta charset="utf-8"> <body> <script src="bundle.js"></script>

以上がwebpack モジュラー管理およびパッケージ化ツールの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。