Web フロントエンド開発ツール - bower 依存関係パッケージ管理ツール_javascript スキル

Bower は Twitter が立ち上げたパッケージ管理ツールで、nodejs のモジュール的な考え方に基づいて機能がさまざまなモジュールに分散されており、モジュール間の接続を管理するために使用されます。

パッケージ管理ツールには通常、次の機能があります:

a) 登録メカニズム: 各パッケージは、検索およびダウンロード時に正しく照合できるように一意の ID を決定する必要があるため、パッケージ管理ツールは登録情報を維持する必要があり、他のプラットフォームに依存できます。

b) ファイル ストレージ: ファイルが保存される場所を決定します。もちろん、このアドレスはネットワーク上でアクセスできます。

c) アップロードとダウンロード: これはツールの主な機能であり、パッケージの使用の利便性を向上させることができます。たとえば、jquery を使用したい場合は、インストールするだけで済みます。ダウンロードするためにあちこち検索する必要はありません。アップロードは必須ではなく、ファイルが保存されている場所によって異なりますが、確実に行うには特定のメカニズムが必要です。

d) 依存関係の分析: これもパッケージ管理ツールによって解決される主な問題の 1 つです。パッケージ間には接続があるため、ダウンロード時にパッケージ間の依存関係を処理する必要があります。パッケージをダウンロードするときは、依存パッケージもダウンロードする必要があります。

bower は、nodejs をベースに開発されているため、まず、nodejs の環境を用意する必要があります。ちなみに、bower を使用するには、git のインストールも必要です。 , なので、ここでは詳しく説明しません。

バウアーがもたらす特典

JQuery を使用する必要があるプロジェクトがある場合、通常の状況では、jQuery 公式 Web サイトにアクセスしてライブラリをダウンロードする必要があります。この場合、jQuery が更新されるたびに、jQuery 公式 Web サイトにアクセスする必要があります。ダウンロードするのは非常に面倒ですが、ダウンロードするバージョンを選択できるコマンドを入力できるツールがあれば、プロジェクト内のすべてのライブラリを更新したい場合に非常に便利ではないでしょうか。最新バージョンでは、コマンドを入力するだけで済みますか? bower のもう 1 つの利点は、ブートストラップをインストールすると、自動的に jquery がダウンロードされることです。簡単に言うと、ダウンロードするライブラリが別のライブラリに依存している限り、ブートストラップは jquery に依存するからです。 Bower は依存ライブラリを自動的にダウンロードします。Bower は非常に強力です。

便器の設置

npm install -g bower は、グローバル環境にインストールすることを意味します

弓使い

1. bower からライブラリをダウンロードします

Bower インストール (パッケージ名: jquery など) [#バージョン: #1.7 など] バージョンは任意ですが、書かれていない場合はデフォルトで最新バージョンがダウンロードされます

例: bower install bootstrap#2.2

2. すべてのライブラリを更新する必要がある場合は、次のコマンドを入力できます

バウアーのアップデート

ダウンロードしたパッケージに関するすべての情報を生成する必要がある場合、たとえば、チームに所属していて、使用したライブラリとそのバージョンを他の人に知らせたい場合は、次のコマンドを実行します。
最初にパッケージの説明を初期化する必要があります。現在の実行環境のディレクトリ

`bower init -y`

次に、

`bower install jquery --save`

jquery のバージョン情報を bower.json ファイルに追加します。複数追加したい場合は、スペース bower install jquery bootstrapless --save
を渡します。

以下は bower.json ファイルの内容です

{
"name": "down",
"authors": [
"xxxxxxxx"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap": "^3.3.6",
"less": "^2.6.1",
"jquery": "^2.2.2"
}
}

Of course, if you are new to nodejs, you may be a little confused, because this is not a basic nodejs tutorial. If you want to understand and learn node, you need to learn on the Internet.

In addition to these benefits, bower also has some more powerful functions, which you need to discover. I will not introduce them here. After all, I have just started learning node

-------------------------------------------------- -------Dividing line------------------------------------------

The relationship between bower and npm

To install bower, you need to install it through npm

The difference between bower and npm:

1. In the previous npm version, it could not share dependent code. That is to say, in the previous npm version, if you downloaded a bootstrap, because bootstrap depends on jquery, it will also include jquery. Download it, but if another library of yours also uses jquery, it will also download a jquery. In this case, the code will be repeated.

Their structure is like this:

bootstrapjQuery
　　xxxxxxxxxjQuery

They are duplicated, right, but it seems that this problem has been solved in the latest version of npm.

　2. npm will download the development environment together, and bower will only download the compiled front module.

　3. NPM is mainly used for internal dependency package management of Node.js projects. The installed modules are located in the node_modules folder in the project root directory. In most cases, Bower is used for front-end development. It manages dependencies on CSS/JS/templates and other content, and the dependent download directory structure can be customized. --The content of this paragraph was found online.

The so-called custom directory structure means that if you open bower in that file directory, it will download the package you need under that file, and npm does not support this.

Summary: We can simply understand that npm is used to manage nodejs modules, that is, packages, and bower is used to manage our front-end libraries.

About the web front-end development tool - bower dependency package management tool, the editor will introduce it to you here. I hope it will be helpful to you!