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‘, ///////@@[email protected]@[//s//S]*//////@@[email protected]@/, ‘//@@[email protected]@//n‘ + cat(‘bower_components/angular-loader/angular-loader.min.js‘) + ‘//n//@@[email protected]@‘, ‘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‘, ///////@@[email protected]@[//s//S]*//////@@[email protected]@/, ‘//@@[email protected]@//n‘ + cat(‘bower_components/angular-loader/angular-loader.min.js‘) + ‘//n//@@[email protected]@‘, ‘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.htmlpartials/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}});}]);
时间: 2024-10-10 04:05:26

npm start 作用的相关文章

Node.js入门:Node.js&NPM的安装与配置

Node.js安装与配置  Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0.6.x的版本上介绍Node.js的安装和配置.(本文一律以0.6.1为例,0.6的其余版本,只需替换版本号即可.从http://nodejs.org/#download可以查看到最新的二进制版本和源代码). Windows平台下的Node.js安装 在过去,Node.js一直不支持在Windows平台下原生

Ubuntu14.04LTS下安装Node.js&NPM以及个人博客hexo的初始化配置

什么是hexo Hexo 是一款基于node 的静态博客网站生成器作者 :tommy351是一个台湾的在校大学生...相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Octopress插件).同其他很多轻量级博客如jekyll.octopress.jekyllbootstrap等一样,也是 使用Markdown语法进行编辑博文,关于Markdown不用怕,推荐搜索维基上面的语法示例,有中文版本http://zh.wikipedia.org/wiki/Markdown,

详解npm的模块安装机制

详解npm的模块安装机制 依赖树表面的逻辑结构与依赖树真实的物理结构 依赖树表面的逻辑结构与依赖树真实的物理结构并不一定相同! 这里要先提到两个命令:tree -d(linux)和npm ls(npm) 在一个npm项目下: tree -d命令以树状图的方式列出一个项目下所有依赖的物理结构 npm ls命令以树状图的方式列出一个项目下所有依赖的逻辑结构 以官方文档为例子: 项目example1有两个依赖模块:mod-a模块和mod-c模块: mod-a模块有一个依赖模块[email protec

npm 与 package.json 快速入门教程

npm 与 package.json 快速入门教程 2017年08月02日 19:16:20 阅读数:33887 npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本文你将了解: 什么是 npm? 安装 npm 更新 npm package.json 文件 package.json 如何创建 package.json 的内容 指定依赖的包 Semantic versioning(语义化版本规则) 安装 pa

使用npm发布自己的组件包

使用npm发布自己的组件包 前言 ?怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一篇更为实用的.简洁但详细的.面向小白的教程供大家参考! 前提准备 要求会安装软件: 要求能配置环境变量: 要求会使用CMD: 要求会打开网页注册账号. (只要你会以上技能,这里都可以看懂) 步骤简介 安装NodeJS 下载安装包 安装软件 测试 配置环境 配置环境变量 安

node.js-v6新版安装过程

node.js-v6新版安装过程 1.Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 2.下载Node.js 打开官网下载链接:https://nodejs.org/en/download/下载对应你系统的Node.js版本, 

Node.js安装及环境配置之Windows篇

一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本:https://nodejs.org/en/download/2.选安装目录进行安装3.环境配置4.测试 三.前期准备 1.Node.js简介简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使

0--node安装

安装NPM NPM的全称是Node Package Manager,如果你熟悉ruby的gem,Python的PyPL.setuptools,PHP的pear,那么你就知道NPM的作用是什么了.没错,它就是Nodejs的包管理器.Nodejs自身提供了基本的模块.但是在这些基本模块上开发实际应用需要较多的工作.所幸的是笔者执笔此文的时候NPM上已经有了5112个Nodejs库或框架,这些库从各个方面可以帮助Nodejs的开发者完成较为复杂的应用.这些库的数量和活跃也从侧面反映出Nodejs社区的

NodeJS实例系列~环境搭建,Hello world归来!

回到目录 1 安装Node.js服务端程序 https://github.com/Microsoft/nodejstools/wiki/Install-Node.js-and-get-started-with-NTVS  2 安装VS扩展插件,在Vs2012上开发node.js服务端程序 3 重启Vs,新建Node.js项目,可以选择web和console等多种框架 4 这时建立Node.js项目之后它会为我们自动添加一个server.js的文件,我们对这个文件可以进行需要,以符合我们的业务要求