npm start 作用
在配置phonecat項(xiàng)目時(shí)需要運(yùn)行npm start在本地配置一個(gè)服務(wù)器環(huán)境，npm start首先會(huì)安裝一系列的必要程序，這些程序依賴package.json中的內(nèi)容，package.json中的內(nèi)容詳解如下：
依賴包介紹
?
在克隆項(xiàng)目之后，目錄如下：
?
?angular-phonecat git:(master) ? tree -L 2.├── LICENSE├── README.md├── app│ ├── bower_components│ ├── css│ ├── img│ ├── index.html│ ├── js│ ├── partials│ └── phones├── bower.json├── package.json├── scripts│ ├── private│ └── update-repo.sh└── test ├── e2e ├── karma.conf.js ├── protractor-conf.js └── unit20 directories, 8 files?
這個(gè)目錄下存在一個(gè)文件 package.json，該文件是做什么用的呢？
?
在 NodeJS 項(xiàng)目中，用 package.json 文件來聲明項(xiàng)目中使用的模塊，這樣在新的環(huán)境部署時(shí)，只要在 package.json 文件所在的目錄執(zhí)行npm install命令即可安裝所需要的模塊。
?
關(guān)于 package.json 中可配置的選項(xiàng)請(qǐng)參考package.json字段全解。
?
從該文件可以看出 PhoneCat 的依賴：
?
"devDependencies": { "karma": "^0.12.16", "karma-chrome-launcher": "^0.1.4", "karma-jasmine": "^0.1.5", "protractor": "~1.0.0", "http-server": "^0.6.1", "tmp": "0.0.23", "bower": "^1.3.1", "shelljs": "^0.2.6"}?
以及一些腳本：
?
"scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -a 0.0.0.0 -p 8000", "pretest": "npm install", "test": "node node_modules/karma/bin/karma start test/karma.conf.js", "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js--single-run", "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update", "preprotractor": "npm run update-webdriver", "protractor": "protractor test/protractor-conf.js", "update-index-async": "node -e /"require('shelljs/global'); sed('-i', ///@@NG_LOADER_START@@[//s//S]*//@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@//n' + cat('bower_components/angular-loader/angular-loader.min.js') + '//n//@@NG_LOADER_END@@', 'app/index-async.html');/""}?
從上可以看出運(yùn)行npm start之前會(huì)運(yùn)行npm install，然后運(yùn)行http-server -a 0.0.0.0 -p 8000啟動(dòng)一個(gè) web 服務(wù)器，最后是運(yùn)行bower install安裝 bower 管理的包。
?
bower 管理的包由 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.3.x","angular-mocks": "1.3.x","jquery": "~2.1.1","bootstrap": "~3.1.1","angular-route": "1.3.x","angular-resource": "1.3.x","angular-animate": "1.3.x"}}?
當(dāng)然，package.json 文件中還定義了一些測(cè)試相關(guān)的命令。
?
bower
?
關(guān)于bower的介紹，參考博客內(nèi)文章：bower介紹。
?
在本項(xiàng)目中，bower 下載的包保存在 angular-phonecat/app/bower_components 目錄下，依賴如下：
?
├── bower_components│ ├── angular│ ├── angular-animate│ ├── angular-mocks│ ├── angular-resource│ ├── angular-route│ ├── bootstrap│ └── jquery?
karma
?
Karma是一個(gè) Javascript 測(cè)試運(yùn)行工具，可以幫助你關(guān)閉反饋循環(huán)。Karma 可以在特定的文件被修改時(shí)運(yùn)行測(cè)試，它也可以在不同的瀏覽器上并行測(cè)試。不同的設(shè)備可以指向 Karma 服務(wù)器來覆蓋實(shí)際場(chǎng)景。
?
關(guān)于 Karma 的使用，本文不做介紹。
?
http-server
?
http-server是一個(gè)簡(jiǎn)單的零配置命令行 HTTP 服務(wù)器，基于Node.js。
?
在命令行中使用方式是：
?
$ node http-server?
在package.json 中定義方式是：
?
"scripts": { "start": "http-server -a 0.0.0.0 -p 8000", }?
支持的參數(shù)：
?
-p 端口號(hào) (默認(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)的文件擴(kuò)展名(默認(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 .?
Protractor
?
Protractor是一個(gè)端對(duì)端的測(cè)試運(yùn)行工具，模擬用戶交互，幫助你驗(yàn)證你的 Angular 應(yīng)用的運(yùn)行狀況。
?
Protractor 使用Jasmine測(cè)試框架來定義測(cè)試。Protractor 為不同的頁面交互提供一套健壯的 API。
?
當(dāng)然，也有其他的端對(duì)端工具，不過 Protractor 有著自己的優(yōu)勢(shì)，它知道怎么和 AngularJS 的代碼一起運(yùn)行，特別是面臨 $digest 循環(huán)的時(shí)候。
?
關(guān)于 Protractor 的使用，本文不做介紹。
?
ShellJS
?
ShellJS是Node.js擴(kuò)展，用于實(shí)現(xiàn) Unix shell 命令執(zhí)行，支持 Windows。
?
一個(gè)示例代碼：
?
require('shelljs/global');if (!which('git')) {echo('Sorry, this script requires git');exit(1);}// Copy files to release dirmkdir('-p', 'out/Release');cp('-R', 'stuff/*', 'out/Release');// Replace macros in each .js filecd('lib');ls('*.js').forEach(function(file) {sed('-i', 'BUILD_VERSION', 'v0.1.2', file);sed('-i', /.*REMOVE_THIS_LINE.*/n/, '', file);sed('-i', /.*REPLACE_LINE_WITH_MACRO.*/n/, cat('macro.js'), file);});cd('..');// Run external tool synchronouslyif (exec('git commit -am "Auto-commit"').code !== 0) {echo('Error: Git commit failed');exit(1);}?
在 PhoneCat 中，主要是用在下面：
?
"update-index-async": "node -e /"require('shelljs/global'); sed('-i', ///@@NG_LOADER_START@@[//s//S]*//@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@//n' + cat('bower_components/angular-loader/angular-loader.min.js') + '//n//@@NG_LOADER_END@@', 'app/index-async.html');/""?
測(cè)試
?
運(yùn)行單元測(cè)試
?
PhoneCat 項(xiàng)目中的單元測(cè)試是使用 Karma 來完成的，所有的單元測(cè)試用例都存放在 test/unit 目錄下。可以通過執(zhí)行以下命令來運(yùn)行單元測(cè)試：
?
$ npm test?
值得一提的是，在運(yùn)行單元測(cè)試前，計(jì)算機(jī)上必須安裝 Google Chrome 瀏覽器，因?yàn)檫@里用到了 karma-chrome-launcher。
?
運(yùn)行端到端測(cè)試
?
PhoneCat 項(xiàng)目使用端到端測(cè)試來保證 Web 應(yīng)用的可操作性，而這個(gè)端到端測(cè)試是通過使用 Protractor 來實(shí)現(xiàn)的，所有的端到端測(cè)試用例都存放在test/e2e 目錄下。可以通過執(zhí)行以下步驟來運(yùn)行端到端測(cè)試：
?
//更新webdriver，此命令只需運(yùn)行一次$ npm run update-webdriver//運(yùn)行PhoneCat$ npm start?
打開另一個(gè)命令行窗口，在其中運(yùn)行：
?
$ npm run protractor?
代碼分析
?
在介紹了 PhoneCat 的運(yùn)行和測(cè)試環(huán)境后，來看看 PhoneCat 的頁面和 js 是怎么組織起來的。
?
- 首先，從 index.html 內(nèi)容可以看到 PhoneCat 頁面使用 bootstrap 框架，并且引入了 jquery 以及 angular 的相關(guān)依賴，包括一些附加模塊：
路由、動(dòng)畫、資源。 - angular 應(yīng)用范圍由
ng-app定義在 html 節(jié)點(diǎn)上，即作用于整個(gè)頁面，其名稱為phonecatApp。 - 通過
ng-view指定加載子視圖的位置，這里主要包括partials/phone-list.html和partials/phone-detail.html兩個(gè)視圖。 - app.js 是應(yīng)用的入口，并且依賴 animations.js、controllers.js、filters.js、services.js 等文件。從這里可以看出，一個(gè) angular 應(yīng)用的 js 大概包括哪幾個(gè)部分的內(nèi)容。
?
app.js 內(nèi)容如下：
?
//JavaScript語法支持嚴(yán)格模式:如果在語法檢測(cè)時(shí)發(fā)現(xiàn)語法問題，則整個(gè)代碼塊失效，并導(dǎo)致一個(gè)語法異常；如果在運(yùn)行期出現(xiàn)了違反嚴(yán)格模式的代碼，則拋出執(zhí)行異常。'use strict';/* App Module *///定義一個(gè)模塊，模塊名稱和頁面 ng-app 中內(nèi)容一致var phonecatApp = angular.module('phonecatApp', ['ngRoute','phonecatAnimations','phonecatControllers','phonecatFilters','phonecatServices']);//定義路由phonecatApp.config(['$routeProvider',function($routeProvider) {$routeProvider.when('/phones', {templateUrl: 'partials/phone-list.html',controller: 'PhoneListCtrl'}).when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html',controller: 'PhoneDetailCtrl'}).otherwise({redirectTo: '/phones'});}]);?
phonecatApp 模塊依賴其他幾個(gè)模塊：ngRoute、phonecatAnimations、phonecatControllers、phonecatFilters、phonecatServices。
?
ngRoute 是內(nèi)置的路由模塊，定義路由規(guī)則：
?
- 當(dāng)訪問
/phones，由PhoneListCtrl控制器處理，并且由partials/phone-list.html模板渲染顯示內(nèi)容。 - 當(dāng)訪問
/phones/:phoneId，由PhoneDetailCtrl控制器處理，并且由partials/phone-detail.html模板渲染顯示內(nèi)容。 - 如果不滿足上面條件，則重定向到
/phones
?
phonecatAnimations 模塊是定義動(dòng)畫效果，沒有真?zhèn)€模塊不影響程序的主要功能的運(yùn)行，故不分析這部分代碼。
?
phonecatControllers 模塊定義在 controllers.js 文件中：
?
'use strict';/* Controllers */var phonecatControllers = angular.module('phonecatControllers', []);// 定義 PhoneListCtrl，并注入 Phone 對(duì)象phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',function($scope, Phone) {$scope.phones = Phone.query();$scope.orderProp = 'age';}]);// 定義 PhoneDetailCtrl，并注入 Phone 對(duì)象和 $routeParams，$routeParams 封裝了路由參數(shù)。phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',function($scope, $routeParams, Phone) {$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {//回調(diào)方法$scope.mainImageUrl = phone.images[0];});$scope.setImage = function(imageUrl) {$scope.mainImageUrl = imageUrl;}}]);?
phonecatFilters 模塊定義在 filter.js 文件中，主要是自定義了一個(gè)過濾器checkmark：根據(jù)輸入是否有內(nèi)容判斷返回?還是?。
?
phonecatServices 模塊定義在 services.js 文件中：
?
'use strict';/* Services */var phonecatServices = angular.module('phonecatServices', ['ngResource']);// 定義 Phone 服務(wù)，并提供了一個(gè) query 方法，還包括一個(gè)內(nèi)置的 get 方法。調(diào)用 get 方法實(shí)際上就是調(diào)用 query 方法，并且可以傳遞一個(gè)參數(shù) phoneIdphonecatServices.factory('Phone', ['$resource',function($resource){return $resource('phones/:phoneId.json', {}, {query: {method:'GET', params:{phoneId:'phones'}, isArray:true}});}]);轉(zhuǎn)載于:https://www.cnblogs.com/answercard/p/6043162.html
總結(jié)
以上是生活随笔為你收集整理的npm start 作用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 技校多少钱啊？
- 下一篇： 练习用基础SQL语句