參考資料: http://www.cnblogs.com/this-xiaoming/p/5821879.html
一、package.json解釋:
package.json是用來聲明項目中使用的模塊,
這樣新的環(huán)境部署時,只要在package.json文件所在的目錄執(zhí)行npm install就可以安裝新的所需要的模塊了。
{
"name": "angular-phonecat",
/name 是必須的字段不要在name中含有node,js等字樣;
名字最終會是url的一部分,命令行的參數(shù),目錄名不能以點號或者下劃線開頭
名字可能在require()方法中被調(diào)用,所以要盡可能的短。/
"private": true,
/private設(shè)置為true,npm會拒絕發(fā)布,這樣會防止私有的repositories不小心被發(fā)布出去。/
"version": "0.0.0",
/version也是必須字段。/
"description": "A tutorial application for AngularJS",
/description是可選字段,npm search的時候會用到的。/
"repository": {
"type": "git",
"url": "https://github.com/tiandashu/nodetest.git"
},
/repository是可選字段,用來指示代碼存放的位置。/
"license": "MIT",
/可選的字段,如果是使用一個普遍的license,比如BSD-3-Clause或MIT,直接使用:
{ "license" : "BSD-3-Clause" }/
"devDependencies": {
//devDependencies是可選的字段可選字段。如果只需要下載使用某些模塊,而不下載這些模塊的測試和文檔框架,放在這個下面比較不錯。
//感覺和Dependencies差不多,是指當(dāng)前包所以來的其他包
//版本的格式可以使version完全匹配,>,>=,<,<=這個版本,~Version接近這個版本,^version兼容這個版本等
//1.2.x X代表任意數(shù)字,因此1.2.1, 1.2.3等都可以
"bower": "^1.7.7",包管理器
"http-server": "^0.9.0",輕量級Web服務(wù)器
"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": "bower install",
/3最后運行 postinstall是指install任務(wù)完成之后會執(zhí)行postinstall任務(wù)/
"prestart": "npm install",
/1先運行 prestart是指先執(zhí)行prestart任務(wù)再執(zhí)行start任務(wù)。/
"start": "http-server ./app -a localhost -p 8000 -c-1",
/2再運行/
"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
啟動一個服務(wù)器。最后運行的是bower install安裝bower管理的包。/
/依賴的插件默認(rèn)安裝在生成的node_modules目錄里面/
二、bower相關(guān):存放在bower_components里面
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 init建立一個bower.json,?$ bower install PACHAGE --save保存新建的bower.json
使用use packages,<script src="bower_components/jquery/dist/jquery.min.js"></script>*/
bower.json內(nèi)容:
{
"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"
}
}
/依賴的插件默認(rèn)安裝在生成的bower_components目錄里面;但是可以在.bowerrc中重新指定插件目錄/、
/*.bowerrc中的配置方式
{
"directory": "plugs"
}
*/
三、http-server介紹:
/http-server是一個簡單的零配置命令行http服務(wù)器,基于node.js。
在命令行的使用:$node http-server/
/在package.json中定義的方式:/
"scripts":{
"start":"http-server -a 0.0.0.0 -p 8000",
}
其中的參數(shù):
-p 端口號 (默認(rèn) 8080)
-a IP 地址 (默認(rèn) 0.0.0.0)
-d 顯示目錄列表 (默認(rèn) 'True')
-i 顯示 autoIndex (默認(rèn) 'True')
-e or --ext 如果沒有提供默認(rèn)的文件擴展名(默認(rèn) 'html')
-s or --silent 禁止日志信息輸出
--cors 啟用 CORS
-o 在開始服務(wù)后打開瀏覽器
-h or --help 打印列表并退出
-c 為 cache-control max-age header 設(shè)置Cache time(秒) ,禁用 caching, 則值設(shè)為 -1 .