VUE3.0 をすぐに始める方法: 学習に進む
1.1 モジュール化とは何ですか?
モジュール化とは、複雑な問題を解決するときに、システムを上から下まで複数のモジュールに分割するプロセスを指します。モジュールは、システム全体において、組み合わせ、分解、交換が可能なユニットです。
プログラミングの分野におけるモジュール化とは、固定ルールに従い、大きなファイルを独立および相互依存する複数の小さなモジュールに分割することです。
コードをモジュールに分割する利点:
コードの再利用性が向上し、
コードの保守性が向上し、
オンデマンド読み込みが可能になります。
2.1 Node.js のモジュールの分類
依存関係に基づく。モジュールのソースに応じて、モジュールは次の 3 つの主要なカテゴリに分類されます。
組み込みモジュール (fs、path、http などの組み込みモジュールは Node.js によって公式に提供されます)、
カスタム モジュール (それぞれ .
によって
開発されたモジュールは、正式に提供される組み込みモジュールでも、ユーザーによって作成されたカスタム モジュールでもありません。使用前にダウンロードする必要があります）
2.2
強力な require() メソッドを使用してモジュールをロードする
と、必要な組み込みモジュール、ユーザー定義モジュール、およびサードパーティ モジュールをロードして使用できます。例えば：
注: require() メソッドを使用して他のモジュールをロードする場合、ロードされたモジュール内のコードが実行されます。カスタム モジュールをロードする場合は、ファイル拡張子「.js」を省略できます。
2.3 Node.js のモジュール スコープ
モジュール スコープとは何ですか
? 関数スコープと同様に、カスタム モジュールで定義された変数、メソッド、およびその他のメンバーには、現在のモジュール内でのみアクセスできます。これは、モジュール スコープと呼ばれます。
モジュール スコープの利点により、
グローバル変数汚染の問題が回避されます (スクリプト タグを使用して 2 つの js ファイルがインポートされ、両方のファイルで同じ変数が定義されている場合、前者は後者によって上書きされます)
2.4 モジュール スコープを外部で共有する メンバー
1 . モジュール オブジェクト
各 .js カスタム モジュールには、現在のモジュールに関連する情報が格納されるモジュール オブジェクトが次のように表示されます。
2. module.exports オブジェクト カスタム
モジュールでは、module.exports オブジェクトを使用して、モジュール内のメンバーを外部で使用するために共有できます。
外部が require() メソッドを使用してカスタム モジュールをインポートすると、取得されるのは module.exports が指すオブジェクトです。
3. メンバーを共有する際の注意点:
require() メソッドを使用してモジュールをインポートする場合、インポート結果は常に module.exports が指すオブジェクトに基づきます。
4. Exports オブジェクト
module.exports ワードの記述は比較的複雑であるため、メンバーを外部に共有するコードを簡素化するために、Node は Exports オブジェクトを提供します。デフォルトでは、exports と module.exports は同じオブジェクトを指します。最終的な共有結果は、依然として module.exports が指すオブジェクトに基づいています。
5.exports と module.exports の使用における誤解 モジュールを
require() するときは、常に module.exports が指すオブジェクトを取得することを常に覚えておいてください。
注: 混乱個人的な理解:exports と module.exports は元々同じオブジェクトを指します。データをマウントするだけでは、同じオブジェクトを指します。エクスポートによってマウントされたデータは、require モジュールによって取得することもできます。一方が値を割り当てた場合（別のオブジェクトを指している場合、それらは同じオブジェクトを指していることにはなりません）、require モジュールは module.exports が指すオブジェクトを取得するため、一方がポインタを変更すると、require モジュールは取得されなくなります。
を
避けるため、同じモジュール内でエクスポートと module.exports を同時に使用しないことをお勧めします。
2.5 Node.js のモジュール仕様Node.js は CommonJS のモジュール仕様に従います。 CommonJS の仕様では、モジュールの特性と各モジュールが相互に依存する方法が規定されています。
CommonJS では次のように規定されています。
(1) 各モジュール内で、モジュール変数は現在のモジュールを表します。
(2) モジュール変数はオブジェクトであり、そのエクスポート属性 (つまり module.exports) は外部インターフェイスです。
(3) モジュールをロードすると、実際にはモジュールの module.exports 属性がロードされます。 require() メソッドはモジュールをロードするために使用されます。
3.1 パッケージ
1. パッケージとは何ですか?
Node.js のサードパーティ モジュールはパッケージとも呼ばれます。
コンピュータとコンピュータが同じものを指すのと同様に、サードパーティのモジュールとパッケージも同じ概念を指しますが、名前は異なります。
2. パッケージのソースは
、Node.js の組み込みモジュールやカスタム モジュールとは異なります。パッケージはサードパーティの個人またはチームによって開発され、誰でも無料で使用できます。
注: Node.js のパッケージはすべて無料のオープンソースであり、料金を支払わなくても無料でダウンロードして使用できます。
3. なぜパッケージが必要なのでしょうか?
Node.js の組み込みモジュールは一部の低レベル API しか提供しないため、組み込みモジュールに基づくプロジェクト開発の効率は非常に低くなります。
パッケージは組み込みモジュールに基づいてカプセル化されており、より高度で便利な API を提供し、開発効率を大幅に向上させます。
パッケージと組み込みモジュールの関係は、jQuery と組み込みブラウザー API の関係に似ています。
4. パッケージはどこからダウンロードできますか?
海外に npm, Inc. という IT 企業があります。この会社には世界最大のパッケージ共有プラットフォームである非常に有名な Web サイトがあります。ウェブサイト 十分な忍耐力がある限り、必要なパッケージを検索してください。
これまでに、世界中の 1,100 万人以上の開発者が、このパッケージ共有プラットフォームを通じて、私たちが使用するために 120 万個以上のパッケージを開発、共有してきました。 npm, Inc. は、すべてのパッケージを外部と共有するために registry.npmjs.org/ にサーバーを提供しており、必要なパッケージをこのサーバーからダウンロードできます。
注:
www.npmjs.com/ Web サイトから必要なパッケージを検索し
、registry.npmjs.org/ サーバーから必要なパッケージをダウンロードします
。 5. パッケージのダウンロード方法
npm, Inc. はパッケージ管理ツールを提供していますこのパッケージ管理ツールを使用して、必要なパッケージを registry.npmjs.org/ サーバーからダウンロードしてローカルで使用できます。
このパッケージ管理ツールの名前は Node Package Manager (npm パッケージ管理ツールと呼ばれます) です。このパッケージ管理ツールは、Node.js インストール パッケージとともにユーザーのコンピューターにインストールされます。
ターミナルで npm -v コマンドを実行すると、コンピューターにインストールされている npm パッケージ管理ツールのバージョン番号を確認できます。
3.2 npm の初体験
1. プロジェクトにパッケージをインストールするコマンド
プロジェクトに指定した名前のパッケージをインストールする場合は、次のコマンドを実行する必要があります。
npm install パッケージの完全名
上記のパッケージ化コマンドは、次のコマンドを実行する必要があります
。 npm i パッケージの完全な
名前
2. 初期パッケージのインストール後に追加されるファイルは何ですか? 初期
パッケージのインストールが完了すると、node_modules という名前の追加フォルダーと構成ファイル package- が作成されます。 lock.json はプロジェクトフォルダーの下にあります。
その中で、node_modules フォルダーは、プロジェクトにインストールされているすべてのパッケージを保存するために使用されます。 require() がサードパーティのパッケージをインポートする場合、このディレクトリからパッケージを検索してロードします。
package-lock.json 構成ファイルは、パッケージ名、バージョン番号、ダウンロード アドレスなど、node_modules ディレクトリ内の各パッケージのダウンロード情報を記録するために使用されます。
注: プログラマーは、node_modules または package-lock.json ファイル内のコードを手動で変更しないでください。これらは、npm パッケージ管理ツールによって自動的に保守されます。
3. 指定したバージョンのパッケージをインストールします。
デフォルトでは、npm install コマンドを使用してパッケージをインストールすると、最新バージョンのパッケージが自動的にインストールされます。指定したバージョンのパッケージをインストールする必要がある場合は、パッケージ名の後ろに @ 記号を使用して特定のバージョンを指定できます。例:
npm i [email protected]
4. パッケージのセマンティック バージョン仕様 パッケージ
のバージョン番号パッケージは「ドット 10 進数」で表されます。たとえば、2.24.0 のように、合計 3 桁の形式で定義されます。
各桁の意味は次のとおりです。
1 桁目: メジャー バージョン
2 桁目: 機能バージョン
3 桁目:バグ修正バージョン
バージョン番号 昇格のルール: 前のバージョン番号が増加する限り、次のバージョン番号は 0 に戻ります。
3.3 パッケージ管理設定ファイル
npm では、package.json というパッケージ管理設定ファイルをプロジェクトのルート ディレクトリに提供する必要があると規定しています。プロジェクトに関連するいくつかの構成情報を記録するために使用されます。例:
プロジェクト名、バージョン番号、説明など。
プロジェクトで使用されるパッケージ、
開発中にのみ使用されるパッケージ、
開発および展開時に必要なパッケージ
複数人でのコラボレーションで
発生する問題: のサイズサードパーティのパッケージは大きすぎるため、チーム メンバーがプロジェクトのソース コードを共有するのが不便になります。解決策: 共有時に node_modules を削除します。
2. プロジェクトにインストールされているパッケージを記録する方法
プロジェクトのルート ディレクトリに、プロジェクトにインストールされているパッケージを記録するために使用できる package.json という構成ファイルを作成します。これにより、node_modules ディレクトリを削除した後、チーム メンバー間でプロジェクトのソース コードを共有しやすくなります。
注: 今後のプロジェクト開発では、node_modules フォルダーを .gitignore 無視ファイルに必ず追加してください。
3. package.json を迅速に作成します
。npm パッケージ管理ツールには、コマンドが実行されるディレクトリに package.json パッケージ管理構成ファイルを迅速に作成するためのショートカット コマンドが用意されています:
npm init -y
注:
(1) 上記のコマンドは、英語のディレクトリでのみ正常に実行できます。したがって、プロジェクトフォルダーの名前は、中国語ではなく英語で命名されている必要があり、スペースはない必要があります。
(2) npm install コマンドを実行してパッケージをインストールすると、npm パッケージ管理ツールはパッケージの名前とバージョン番号を package.json に自動的に記録します。
4. 依存関係ノード
package.json ファイルには、npm install コマンドを使用してインストールしたパッケージを記録するために特別に使用される依存関係ノードがあります。
5. すべてのパッケージを一度にインストールします。node_modules
が削除されたプロジェクトを取得した場合、プロジェクトを実行する前に、すべてのパッケージをプロジェクトにダウンロードする必要があります。 それ以外の場合は、次のようなエラーが報告されます。
npm install コマンド (または npm i) を実行して、すべての依存パッケージを一度にインストールできます。
6. パッケージをアンインストールするには
、npm uninstall コマンドを実行して指定したパッケージをアンインストールします。
npm uninstall 特定のパッケージ名
注: npm uninstall コマンドが正常に実行されると、アンインストールされたパッケージは package.json の依存関係から自動的に削除されます。 。アンインストールの略語はありません。
7. devDependency ノード。
一部のパッケージがプロジェクト開発段階でのみ使用され、プロジェクトがオンラインになった後は使用されない場合は、これらのパッケージを devDependency ノードに記録することをお勧めします。
与之对应的，如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到dependencies 节点中。
次のコマンドを使用して、パッケージを devDependency ノードに記録できます。
3.4 パッケージのダウンロード速度が遅い問題を解決する
1. パッケージのダウンロード速度が遅いのはなぜですか?
npm を使用してパッケージをダウンロードする場合、デフォルトでは海外の registry.npmjs.org/ サーバーからダウンロードするため、パッケージのダウンロード速度が非常に遅くなります。 。
2。TaobaoNPM Mirror Server
Taobaoは、公式の外国サーバー上のパッケージを国内サーバーに同期させ、中国でパッケージ配信サービスを提供するために、中国にサーバーを構築しました。これにより、パッケージのダウンロード速度が大幅に向上します。
拡張: ミラーリングはファイル ストレージの一種で、あるディスク上のデータは別のディスクに同一のコピーを持ちます。これがミラーです。
3. npm のパッケージミラーソースを切り替えます。
パッケージのミラーソースは、パッケージのサーバーアドレスを参照します。
4、nrm
为了更方便的切换下包的镜像源，我们可以安装nrm 这个小工具，利用nrm 提供的终端命令，可以快速查看和切换下包的镜像源。
3.5 パッケージの分類
npm パッケージ管理ツールを使用してダウンロードされたパッケージは、次の 2 つのカテゴリに分類されます:
プロジェクト パッケージ
グローバル パッケージ
1. プロジェクト パッケージ
プロジェクトの node_modules ディレクトリにインストールされるパッケージはすべてプロジェクト パッケージです。
プロジェクト パッケージは、次の 2 つのカテゴリに分類されます。
開発依存関係パッケージ (devDependency ノードに記録されるパッケージ。開発中にのみ使用されます。)
コア依存関係パッケージ (依存関係ノードに記録されるパッケージ。開発中およびプロジェクト中に使用されます。) になります。オンラインになった後に使用)
2。グローバルパッケージNPMインストールコマンドを実行すると、-gパラメーターが提供されている場合、パッケージはグローバルパッケージとしてインストールされます。
グローバル パッケージは、C:Usersuser directoryAppDataRoamingnpmnode_modules ディレクトリにインストールされます。
注:
(1) ツール パッケージのみをグローバルにインストールする必要があります。便利な端末コマンドが提供されるからです。
(2) パッケージを使用する前にグローバルにインストールする必要があるかどうかを判断するには、公式の使用説明書を参照してください。
3. i5ting_toc
i5ting_toc は、MD ドキュメントを HTML ページに変換できる小さなツールです。使用手順は次のとおりです。
3.6 標準化されたパッケージ構造
パッケージの概念とパッケージのダウンロードおよび使用方法を理解した後、パッケージの内部構造を詳しく見てみましょう。
標準化されたパッケージは、次の 3 つの要件を満たす必要があります。
(1) パッケージは別のディレクトリに存在する必要があります
(2) パッケージの最上位ディレクトリには package.json パッケージ管理構成ファイルが含まれている必要があります
(3) package.json には次の内容が含まれている必要があります3 つの属性: name、version、main で、それぞれパッケージ名、バージョン番号、パッケージ エントリを表します。
注：上記の3つの要件は、
標準化されたパッケージ構造がより多くの制約を参照する必要がある形式です。
独自のパッケージ
1. パッケージの基本構造を初期化します
(1) パッケージのルート ディレクトリとして新しい itheima-tools フォルダーを作成します
(2) itheima-tools フォルダー内に、次の 3 つのファイルを作成します。
package.json (パッケージ管理)設定ファイル）
index.js（パッケージのエントリファイル）
README.md（パッケージの説明文書）
2. package.jsonの初期化
注: name - アプリケーションまたはソフトウェア パッケージの名前を示すために使用されます。 version - 現在のバージョンを示します。 description はアプリケーション/ソフトウェア パッケージの短い説明です。ソフトウェア パッケージ機能に関連するキーワードの配列 (ノードの公式 Web サイトを参照してソフトウェア パッケージを見つけるのに役立ちます) - ソフトウェア パッケージのライセンスを指定します。
3. パッケージのドキュメントを作成します。
パッケージのルート ディレクトリにある README.md ファイルは、パッケージの使用法に関するドキュメントです。これにより、ユーザーの利便性のために、パッケージの使用方法をマークダウン形式で事前に記述することができます。
READMEファイルには、パッケージの機能、使用方法、注意事項等が明確に記載できれば、どのような内容を記載する必要はありません。
3.8 リリース パッケージ
1. npm アカウントを登録します
(1) www.npmjs.com/ Web サイトにアクセスし、サインアップ ボタンをクリックして登録ユーザー インターフェイスに入ります
(2) アカウント関連情報を入力します: フルネーム、パブリック電子メール、ユーザー名、パスワード
(3) [アカウントの作成] ボタンをクリックしてアカウントを登録します
(4) メールアドレスにログインし、認証リンクをクリックしてアカウントを認証します
。 2.npm アカウントの登録が完了したら、
npm アカウントにログインします。
ターミナルで npm login コマンドを実行し、ユーザー名とパスワード (パスワード) を入力します。これは非表示になっており表示されません。正しいキー (Enter)、電子メール アドレス、電子メール アドレスに送信された OTP コードを入力するだけです。正常にログインできます。
注: npm login コマンドを実行する前に、まずパッケージのサーバー アドレスを npm の公式サーバーに切り替える必要があります。 (以前に淘宝サーバーを使用していた場合は、npm 公式サーバーに切り替える必要があります) そうしないと、パッケージの公開に失敗します。
3. パッケージを npm に公開します
。
ターミナルをパッケージのルート ディレクトリに切り替えた後、 npm public コマンドを実行して、パッケージを npm に公開します (注: パッケージ名は同じであってはなりません。公式 Web サイトにアクセスして、同じ名前のパッケージがあるかどうかを確認してください）。
4.公開されたパッケージを削除します
。
注：
（1）NPMの不公表コマンドは、72時間以内に公開されたパッケージのみを削除できます
（2）NPMによって削除されたパッケージは、24時間以内に再発行することはできません
（3）パッケージを公開するときは注意して、公開しないようにしてくださいnpm では意味のないパッケージです!
4.1キャッシュからのロードの優先順位
。 これはまた、呼び出しが複数回require（）を複数回使用しても、モジュールのコードが複数回実行されないことを意味します。
注：組み込みモジュール、ユーザー定義モジュール、またはサードパーティモジュールであれ、最初にキャッシュからロードされ、モジュールの負荷効率が向上します。
4.2内蔵モジュールのロードメカニズム
内蔵モジュールは、node.jsによって公式に提供されています。
たとえば、要求（ 'fs'）は、node_modulesディレクトリに同じ名前があるパッケージがある場合でも、fsとも呼ばれます。
4.3 カスタム モジュールのロード メカニズム
require() を使用してカスタム モジュールをロードする場合、./ または ../ で始まるパス識別子を指定する必要があります。カスタム モジュールをロードするときに、./ や ../ などのパス識別子が指定されていない場合、ノードはそれを組み込みモジュールまたはサードパーティ モジュールとしてロードします。
同時に、require（）を使用してカスタムモジュールをインポートする場合、ファイル拡張機能が省略されている場合、node.jsは次のファイルを順番にロードしようとし
ます
。
ロードする .js 拡張子
(3) ロードする .json 拡張子を完成させる
(4) ロードする .node 拡張子を完成させる
(5) ロードが失敗し、ターミナルがエラーを報告する
4.4 サードパーティ モジュールのロード メカニズム
が require に渡される
場合() モジュール識別子が組み込みモジュールではなく、「./」または「../」で始まらない場合、Node.js は /node_modules フォルダーからサードパーティ モジュールをロードしようとします。現在のモジュールの親ディレクトリ。
対応するサードパーティ モジュールが見つからない場合は、1 レベル上の親ディレクトリに移動され、ファイル システムのルート ディレクトリまでロードされます。
たとえば、（「ツール」）を仮定すると、 'c： users itheima project foo.js'ファイルで呼び出されます。Node.jsは次の順序で検索します
。 Project node_modules tools
（2）c： users itheima node_modules tools
（3）c： uses node_modules tools
（4）c： node_modules tools
4.5ディレクトリとしてモジュールとして
モジュールを通過する際の
指示識別子は、require（）を読み込むと、3つの読み込み方法があります。
（1）ディレクトリ内のパッケージと呼ばれるファイルを検索し、require（）のロードのエントリポイントとして機能するメイン属性を探します（
） 2）パッケージファイルがない場合、またはメインエントリが存在しない、または解析できない場合、ディレクトリにある場合、node.jsはディレクトリにindex.jsファイルをロードしようとします。
（3）上記の2つのステップが失敗した場合、node.jsは端末にエラーメッセージを印刷し、欠落モジュールを報告します：エラー：モジュール 'xxx'が見つからない
この記事はhttps://juejin.cn/postから再現されています/7083445004240158757