{"id":20619769,"url":"https://github.com/twtrubiks/bower-beginners-guide","last_synced_at":"2025-08-01T11:08:14.435Z","repository":{"id":84518895,"uuid":"76151731","full_name":"twtrubiks/Bower-Beginners-Guide","owner":"twtrubiks","description":"Bower 基本教學 - 從無到有 Bower-Beginners-Guide","archived":false,"fork":false,"pushed_at":"2016-12-11T04:00:15.000Z","size":4,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T12:12:29.704Z","etag":null,"topics":["beginners","bower","guide","npm","tutorial"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-11T03:23:19.000Z","updated_at":"2023-10-15T08:19:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"ffa353dc-48c4-4cb8-9194-8cbf2a7e170e","html_url":"https://github.com/twtrubiks/Bower-Beginners-Guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FBower-Beginners-Guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FBower-Beginners-Guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FBower-Beginners-Guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2FBower-Beginners-Guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/Bower-Beginners-Guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067779,"owners_count":21207396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginners","bower","guide","npm","tutorial"],"created_at":"2024-11-16T12:12:29.027Z","updated_at":"2025-04-15T12:13:06.252Z","avatar_url":"https://github.com/twtrubiks.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bower 基本使用教學:memo:\n因為小弟覺得這東西非常實用，所以就簡單寫個教學文，順便記錄一下:memo:，希望能幫助想學的人:smile:\n\n如果教學有誤再請糾正:sweat_smile:\n\n影片介紹 [Bower基本教學 - 從無到有 Bower-Beginners-Guide](https://youtu.be/vCZCs1XNC5Q)\n\n相信大家一定常遇到 js 套件一更新，就要重新再去網路上抓，然後再放回自己的專案中，\n\n其實，這是一個非常沒有效率的方法 :persevere:\n\n今天，和大家介紹一個管理套件的好工具  [Bower](https://bower.io/)\n\n## Bower 介紹\n\n[Bower](https://bower.io/) 官網\n\n## 前置安裝作業 - 安裝 node.js\n\n因為我們需要使用 npm ( Node Package Manager )，而他是 Node.js 的套件（package）管理工具，\n\n所以我們必須先安裝 \u003cb\u003enode.js\u003c/b\u003e，請先到 [Node.js](https://nodejs.org/en/) 官網，下載後安裝即可，如何確認是否安裝成功呢 ?\n\n在 cmd (命令提示字元) 輸入\n\n```\nnode -v\n```\n\n如果有跑出 node.js 版本號代表安裝成功，如下圖\n\n![alt atg](http://i.imgur.com/EQ7MnfL.png)\n\n然後也請安裝 [git](https://git-scm.com/)\n\n\n## 開始安裝 Bower\n\n參考 [Bower](https://bower.io/) 官方教學\n\n使用 cmd (命令提示字元) 輸入以下指令\n\n```\nnpm install -g bower\n```\n\n## 開始使用 Bower\n\n接著在目標資料夾底下使用 cmd (命令提示字元) 輸入以下指令\n```\nbower install \u003cpackage\u003e\n```\n\n例如我們安裝 jquery\n\n```\nbower install jquery\n```\n![alt atg](http://i.imgur.com/5zn388m.png)\n \n預設安裝的資料夾是 \u003cb\u003ebower_components\u003c/b\u003e\n \n另外，因為不一定每一個套件都會在 Bower 之上，所以我們也可以透過 Bower 安裝 Github 上面的套件，\n\n例如，我們從 Github 上安裝 bootstrap\n```\nbower install https://github.com/twbs/bootstrap.git\n```\n\n![alt atg](http://i.imgur.com/mvCsemA.png)\n\n\n可以使用以下指令，觀看目前資料夾下有安裝的套件\n```\nbower list\n```\n![alt atg](http://i.imgur.com/g4tPZUq.png)\n\n不知道大家有沒有發現呢 ?\n\n每次安裝我們都要\n\n```\nbower install jquery\nbower install bootstrap\n```\n\n雖然很簡單，但很煩 :scream:\n\n有沒有一次安裝我們需要的全部套件呢 ?\n\n有的 ! \n\n讓我們來建立 Bower 設定檔 bower.json 吧~\n\n## 建立 Bower 設定檔 bower.json\n\n如何建立 Bower 設定檔 bower.json 呢 ?\n\n在目標資料夾底下使用 cmd (命令提示字元) 輸入以下指令\n\n```\nbower init\n```\n如果說明不想打，直接按 Enter 即可\n\n![alt atg](http://i.imgur.com/RYGxqoj.png)\n\n執行完成後，你會發現資料夾底下多出 \u003cb\u003ebower.json\u003c/b\u003e\n\n接著在目標資料夾底下使用 cmd (命令提示字元) 輸入以下指令\n\n```\nbower install jquery-validation --save\n```\n\n再去打開 \u003cb\u003ebower.json\u003c/b\u003e  ，你會發現多出一些東西 ( 如下圖紅色框起來的地方 )\n![alt atg](http://i.imgur.com/AlZuIZb.png)\n\n假如今天我們需要安裝  jquery-validation 以及 bootstrap ， 我們可以打開 bower.json 輸入套件名稱\n\n![alt atg](http://i.imgur.com/czgJeNi.png)\n\n接著在目標資料夾底下使用 cmd (命令提示字元) 輸入以下指令\n\n```\nbower install \n```\n![alt atg](http://i.imgur.com/Iyx48YC.png)\n\n一次就幫你安裝全部套件 :blush:\n\n\n## 如何修改預設 Bower 安裝路徑資料夾\n\n剛剛前面有提到，bower 預設安裝的資料夾是 \u003cb\u003ebower_components\u003c/b\u003e，\n\n那我們該怎麼修改他的默認路徑呢 ?\n\n首先，先建立一個  \u003cb\u003e.bowerrc\u003c/b\u003e 檔案\n\nP.S 因為 Windows 無法直接建立一個沒有名稱卻只有副檔名的檔案\n\n所以，我們必須在 cmd (命令提示字元) 輸入以下指令\n```\ntouch .bowerrc\n```\n![alt atg](http://i.imgur.com/QE4t7J6.png)\n\n路徑底下就會多出一個  \u003cb\u003e.bowerrc\u003c/b\u003e 檔案\n\n接著在 \u003cb\u003e.bowerrc\u003c/b\u003e 檔案裡輸入以下文字\n```\n{\n  \"directory\": \"js/javascript\" \n}\n```\n以後使用 bower 安裝套件，默認就會安裝到路徑底下的 \u003cb\u003ejs/javascript\u003c/b\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fbower-beginners-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fbower-beginners-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fbower-beginners-guide/lists"}