當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

npm start 作用

發布時間：2023/11/27 生活经验 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 npm start 作用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在配置phonecat項目時需要運行npm start在本地配置一個服務器環境，npm start首先會安裝一系列的必要程序，這些程序依賴package.json中的內容，package.json中的內容詳解如下：

依賴包介紹

在克隆項目之后，目錄如下：

?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

這個目錄下存在一個文件 package.json，該文件是做什么用的呢？

在 NodeJS 項目中，用 package.json 文件來聲明項目中使用的模塊，這樣在新的環境部署時，只要在 package.json 文件所在的目錄執行npm install命令即可安裝所需要的模塊。

關于 package.json 中可配置的選項請參考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');/""}

從上可以看出運行npm start之前會運行npm install，然后運行http-server -a 0.0.0.0 -p 8000啟動一個 web 服務器，最后是運行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"}}

當然，package.json 文件中還定義了一些測試相關的命令。

bower

關于bower的介紹，參考博客內文章：bower介紹。

在本項目中，bower 下載的包保存在 angular-phonecat/app/bower_components 目錄下，依賴如下：

├── bower_components│ ├── angular│ ├── angular-animate│ ├── angular-mocks│ ├── angular-resource│ ├── angular-route│ ├── bootstrap│ └── jquery

karma

Karma是一個 Javascript 測試運行工具，可以幫助你關閉反饋循環。Karma 可以在特定的文件被修改時運行測試，它也可以在不同的瀏覽器上并行測試。不同的設備可以指向 Karma 服務器來覆蓋實際場景。

關于 Karma 的使用，本文不做介紹。

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 .

Protractor

Protractor是一個端對端的測試運行工具，模擬用戶交互，幫助你驗證你的 Angular 應用的運行狀況。

Protractor 使用Jasmine測試框架來定義測試。Protractor 為不同的頁面交互提供一套健壯的 API。

當然，也有其他的端對端工具，不過 Protractor 有著自己的優勢，它知道怎么和 AngularJS 的代碼一起運行，特別是面臨 $digest 循環的時候。

關于 Protractor 的使用，本文不做介紹。

ShellJS

ShellJS是Node.js擴展，用于實現 Unix shell 命令執行，支持 Windows。

一個示例代碼：

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');/""

測試

運行單元測試

PhoneCat 項目中的單元測試是使用 Karma 來完成的，所有的單元測試用例都存放在 test/unit 目錄下。可以通過執行以下命令來運行單元測試：

$ npm test

值得一提的是，在運行單元測試前，計算機上必須安裝 Google Chrome 瀏覽器，因為這里用到了 karma-chrome-launcher。

運行端到端測試

PhoneCat 項目使用端到端測試來保證 Web 應用的可操作性，而這個端到端測試是通過使用 Protractor 來實現的，所有的端到端測試用例都存放在test/e2e 目錄下?？梢酝ㄟ^執行以下步驟來運行端到端測試：

//更新webdriver，此命令只需運行一次$ npm run update-webdriver//運行PhoneCat$ npm start

打開另一個命令行窗口，在其中運行：

$ npm run protractor

代碼分析

在介紹了 PhoneCat 的運行和測試環境后，來看看 PhoneCat 的頁面和 js 是怎么組織起來的。

首先，從 index.html 內容可以看到 PhoneCat 頁面使用 bootstrap 框架，并且引入了 jquery 以及 angular 的相關依賴，包括一些附加模塊：路由、動畫、資源。
angular 應用范圍由ng-app定義在 html 節點上，即作用于整個頁面，其名稱為phonecatApp。
通過ng-view指定加載子視圖的位置，這里主要包括partials/phone-list.html和partials/phone-detail.html兩個視圖。
app.js 是應用的入口，并且依賴 animations.js、controllers.js、filters.js、services.js 等文件。從這里可以看出，一個 angular 應用的 js 大概包括哪幾個部分的內容。

app.js 內容如下：

//JavaScript語法支持嚴格模式:如果在語法檢測時發現語法問題，則整個代碼塊失效，并導致一個語法異常；如果在運行期出現了違反嚴格模式的代碼，則拋出執行異常。'use strict';/* App Module *///定義一個模塊，模塊名稱和頁面 ng-app 中內容一致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 模塊依賴其他幾個模塊：ngRoute、phonecatAnimations、phonecatControllers、phonecatFilters、phonecatServices。

ngRoute 是內置的路由模塊，定義路由規則：

當訪問/phones，由PhoneListCtrl控制器處理，并且由partials/phone-list.html模板渲染顯示內容。
當訪問/phones/:phoneId，由PhoneDetailCtrl控制器處理，并且由partials/phone-detail.html模板渲染顯示內容。
如果不滿足上面條件，則重定向到/phones

phonecatAnimations 模塊是定義動畫效果，沒有真個模塊不影響程序的主要功能的運行，故不分析這部分代碼。

phonecatControllers 模塊定義在 controllers.js 文件中：

'use strict';/* Controllers */var phonecatControllers = angular.module('phonecatControllers', []);// 定義 PhoneListCtrl，并注入 Phone 對象phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',function($scope, Phone) {$scope.phones = Phone.query();$scope.orderProp = 'age';}]);// 定義 PhoneDetailCtrl，并注入 Phone 對象和 $routeParams，$routeParams 封裝了路由參數。phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone',function($scope, $routeParams, Phone) {$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {//回調方法$scope.mainImageUrl = phone.images[0];});$scope.setImage = function(imageUrl) {$scope.mainImageUrl = imageUrl;}}]);

phonecatFilters 模塊定義在 filter.js 文件中，主要是自定義了一個過濾器checkmark：根據輸入是否有內容判斷返回?還是?。

phonecatServices 模塊定義在 services.js 文件中：

'use strict';/* Services */var phonecatServices = angular.module('phonecatServices', ['ngResource']);// 定義 Phone 服務，并提供了一個 query 方法，還包括一個內置的 get 方法。調用 get 方法實際上就是調用 query 方法，并且可以傳遞一個參數 phoneIdphonecatServices.factory('Phone', ['$resource',function($resource){return $resource('phones/:phoneId.json', {}, {query: {method:'GET', params:{phoneId:'phones'}, isArray:true}});}]);

轉載于:https://www.cnblogs.com/answercard/p/6043162.html

總結

以上是生活随笔為你收集整理的npm start 作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。