分享於2016/1/21台中前端社群

1. npm
您的專屬套件管家
台中前端社群@夢種子

2. Node.js

3. Node.js

4. npm, package manager of node.js

5. 不只是node.js的管理套件
node.js
browsers
angular
bower
gulp
grunt
cordova
react
io.js
mobile
jquery
tessel
nodebots
docpad

6. npm

7. 我為什麼需要套件管理?
不同專案的需求
開發團隊維護的統一規格
套件的版本控制
套件的相依性
安裝特殊需求的套件例如測試用的套件
好用工具的安裝﹣例如自動化工具、壓縮工具

8. npm 安裝
1. 到https://nodejs.org 安裝合適版本的node.js
2. 安裝完畢後輸入npm -v，確認npm的版本
3. 透過npm -h 找出npm的指令
4. 例如: npm install -h 用這個指令了解如何使用npm
install
5. 搜尋npm cheat sheet找到快速指令列表

9. npm installation

10. npm 安裝指令的標籤
1. -g的意義
2. --save的意義
3. --save-dev的意義
4. 使用-h的觀察
5. <pkg>與@的用途

11. npm - node_modules

12. npm - package.json
{
“name”: “my awesome App”,
“version”: “0.0.1”,
“dependencies”: {
“套件名稱”: “版本”
}
}
// npm install 將安裝套件與版本

13. npm - 透過init協助產生package.json
npm init //初始化專案的npm設定檔
輸入必要的資料
在專案內安裝套件將自動更新
未來可直接更新設定檔的內容
透過npm install管理與維護套件內容
了解版本^與~符號的不同

14. npm與前端
http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging
npm是給後端開發使用的
npm只給javascript使用
npm套件的樹狀屬性不適合前端
前端套件相依性的問題不需要npm處理
多組設定檔需要管理
未來的新星 npm-www
#前端工具如gulp.js, browserify, webpack等都需要npm來安裝管理

15. 會後問券
https://goo.gl/ZxCOqk