package.json和bower的參數解釋

package.json和bower的參數解釋

 

1、package.json解釋：

package.json是用來聲明項目中使用的模塊，
這樣新的環境部署時，只要在package.json文件所在的目錄執行npminstall就能夠安裝新的所須要的模塊了。
{
"name": "angular-phonecat",name 是必須的字段
不要在name中含有node，js等字樣
名字最終會是url的一部分，命令行的參數，目錄名不能以點號或者下劃線開頭
名字可能在require（）方法中被調用，因此要儘量的短。
"private": true,private設置爲true，npm會拒絕發佈，這樣會防止私有的repositories不當心被髮布出去。
"version": "0.0.0",version也是必須字段。
"description": "A tutorial application for AngularJS",description是可選字段，npm search的時候會用到的。
"repository": "https://github.com/angular/angular-phonecat",repository是可選字段，用來指示代碼存放的位置。
/*（"repository" :
{ "type" : "git"
, "url" : "http://github.com/npm/npm.git"
}

"repository" :
{ "type" : "svn"
, "url" : "http://v8.googlecode.com/svn/trunk/"
}）*/
"license": "MIT",/*可選的字段，若是是使用一個廣泛的license，好比BSD-3-Clause或MIT，直接使用：

{ "license" : "BSD-3-Clause" }*/
"devDependencies": {
//devDependencies是可選的字段可選字段。若是隻須要下載使用某些模塊，而不下載這些模塊的測試和文檔框架，放在這個下面比較不錯。
//感受和Dependencies差很少，是指當前包因此來的其餘包
//版本的格式可使version徹底匹配,>,>=,<,<=這個版本，~Version接近這個版本，^version兼容這個版本等
//1.2.x X表明任意數字，所以1.2.1, 1.2.3等均可以
"bower": "^1.7.7",包管理器
"http-server": "^0.9.0",輕量級Web服務器
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",用於運行單元測試
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"protractor": "^3.2.2"運行端到端的測試
},

scripts是可選的字段，實際上指的是npm-scripts。
npm run爲每條命令提供了pre-和post-兩個鉤子（hook）。
"scripts": {
postinstall是指install任務完成以後會執行postinstall任務
3最後運行 "postinstall": "bower install",

prestart是指在先執行prestart任務再執行start任務。
1先運行 "prestart": "npm install",
2再運行"start": "http-server ./app -a localhost -p 8000 -c-1",

"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",

"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",

"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",

"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
}
}
從上面能夠看出，運行npm start以前都會運行npm install，而後start運行"http-server ./app -a localhost -p 8000 -c-1
啓動一個服務器。最後運行的是bower install安裝bower管理的包。

2、http-server介紹：
http-server是一個簡單的零配置命令行http服務器，基於node.js。
在命令行的使用:$node http-server
在package.json中定義的方式：
"scripts":{
"start":"http-server -a 0.0.0.0 -p 8000",
}
其中的參數：
-p 端口號 (默認 8080)

-a IP 地址 (默認 0.0.0.0)

-d 顯示目錄列表 (默認 'True')

-i 顯示 autoIndex (默認 'True')

-e or --ext 若是沒有提供默認的文件擴展名(默認 'html')

-s or --silent 禁止日誌信息輸出

--cors 啓用 CORS

-o 在開始服務後打開瀏覽器

-h or --help 打印列表並退出

-c 爲 cache-control max-age header 設置Cache time(秒) ，禁用 caching, 則值設爲 -1 .

3、bower相關：存放在bower_components裏面
$ npm install -g bower 創建並初始化bower
$ bower install <package>把 bower install packages 創建在bower_components裏面,
一個package能夠是一個url，一個github shorthand ，一個git endpoint等。
例如：
# installs the project dependencies listed in bower.json(這是註釋)
$ bower install
# registered package
$ bower install jquery
# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js
以後save packages 用$ bower init創建一個bower.json，㐈$ bower install PACHAGE --save保存新建的bower.json
使用use packages，<script src="bower_components/jquery/dist/jquery.min.js"></script>

bower.json內容:{"name": "angular-phonecat","description": "A starter project for AngularJS","version": "0.0.0","homepage": "https://github.com/angular/angular-phonecat","license": "MIT","private": true,"dependencies": {"angular": "1.5.x","angular-animate": "1.5.x","angular-mocks": "1.5.x","angular-resource": "1.5.x","angular-route": "1.5.x","bootstrap": "3.3.x","jquery": "2.2.x"}}