Web front-end development tool - bower dependency package management tool_javascript skills

Bower is a package management tool launched by Twitter. Based on the modular idea of ​​nodejs, functions are dispersed into various modules so that there is a connection between modules. Bower is used to manage this connection between modules.

Package management tools generally have the following functions:

a) Registration mechanism: Each package needs to determine a unique ID so that it can be correctly matched when searching and downloading, so the package management tool needs to maintain registration information and can rely on other platforms.

b) File storage: Determine the location where the file is stored. It can be found when downloading. Of course, this address is accessible on the network.

c) Upload and download: This is the main function of the tool and can improve the convenience of using the package. For example, if you want to use jquery, you only need to install it. You don’t need to search everywhere to download it. Uploading is not necessary and depends on the location where the file is stored, but a certain mechanism is required to ensure it.

d) Dependency analysis: This is also one of the main problems solved by package management tools. Since there are connections between packages, the dependencies between them need to be processed when downloading. When downloading a package, you also need to download dependent packages.

Since bower is developed based on nodejs, you must first have a nodejs environment. As for installing nodejs in this way, there are a lot of tutorials on the Internet. By the way, you also need to install git to use bower, so I won’t go into details here.

Benefits brought by bower

If you have a project that needs to use JQuery, under normal circumstances we need to go to the jQuery official website to download the library. In this case, every time jquery is updated, we have to go to the jQuery official website to download it, which will be very troublesome. , wouldn’t it be very convenient if there was a tool that could input a command to let us choose the version to download, and if we wanted to update all the libraries in our project to the latest version, we only need to enter a command? Another advantage of bower is that if When you install bootstrap, it will automatically download jquery, because bootstrap depends on jquery. Simply put, as long as the library we download depends on another library, bower will automatically download the dependent library for us. Bower is so powerful.

bower installation

npm install -g bower means installing to the global environment

Using bower

　1. Download the library through bower

Bower install (package name such as: jquery) [#version such as: #1.7] The version is optional, if not written, the latest version will be downloaded by default

For example: bower install bootstrap#2.2

2. If you need to update all libraries, we can enter the following command

Bower update

If you need to generate all the information about a package you downloaded, for example, if you are in a team and you want others to know which libraries you have used and what their versions are, then we can do it with the following command .
We need to initialize a package description first. It will create a directory of bower.json in your current execution environment directory

　`bower init -y`

Then pass

　`bower install jquery --save`

It will add jquery version information to the bower.json file. If you want to add more than one, you can pass the space bower install jquery bootstrap less --save

The following is the content of bower.json file

{
"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"
}
}

　　當然如果你是nodejs新手或許你會有些茫然，因為這裡並不是一個nodejs基礎教程，如果你想了解想學node的話還需要到網絡中學習。

　　bower除了這些好處以為，還有一些更強大的功能，那就需要大家去發現了，我這裡就不再介紹了，畢竟我也是剛開始學習node

----------------------------------------------- -------分割線-------------------------------------------------

bower與npm的關係

　　　安裝bower需要透過npm來安裝

bower與npm的差異：

　　1. 在之前的npm版本中，它不能共享依賴的程式碼，也就說，在以前的npm版本中，如果你下載了一個bootstrap，因為bootstrap是依賴jquery的，所以它會把jquery也下載下來，但是如果你的另一個函式庫也用到了jquery，那麼它也會去下載一個jquery，這樣的話，程式碼就重複了。

　　它們的結構就像這樣：

　　　　bootstrapjQuery
　　　　xxxxxxxxxxxxjQuery

　　它們重複了對吧，不過好像在npm的最新版本中解決了這個問題。

　　2. npm 會將開發環境一起下載下來，bower 只會下載 編譯後的前度模組。

　　3. NPM主要運用於Node.js專案的內部依賴套件管理，安裝的模組位於專案根目錄下的node_modules資料夾內。而Bower大部分情況下用於前端開發，對於CSS/JS/模板等內容進行依賴管理，依賴的下載目錄結構可以自訂。 -- 本段內容是在網路上找到的。

　　所謂的自訂目錄結構的意思是說，你在那個檔案目錄打開的bower，那麼它就會在那個檔案下，下載你需要的套件，而npm就不支援這個。

總結：我們可以簡單的來理解npm是用來管理nodejs模組的也就是套件，而bower是用來管理我們前端函式庫的。

有關Web前端開發工具－bower依賴套件管理工具小編就跟大家介紹到這裡，希望對大家有幫助！