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 作用相关推荐
- npm update 作用,它做了那些事情?
npm update 命令 这个命令会将所有列出的包更新到最新的版本(由 package.json 中的版本号决定),并且是根据 Semver 语义化版本控制模块. 举个简单的例子: "re ...
- npm 与 package.json 快速入门
摘自 https://blog.csdn.net/u011240877/article/details/76582670#什么是-npm npm 是前端开发广泛使用的包管理工具,之前使用 Weex ...
- 在Windows平台上安装Node.js及NPM模块管理
1. 下载Node.js官方Windows版程序:http://nodejs.org/#download 从0.6.1开始,Node.js在Windows平台上提供了两种安装方式,一是.MSI ...
- 了解 yarn 、npm、nodejs
了解 yarn .npm.nodejs 一.前言 针对即将上线的 jeecg-boot 做一些准备. 二.了解系列 1.了解 nodejs Node.js 就是运行在服务端的 JavaScript.N ...
- npm 与 package.json 快速入门教程
npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本文你将了解: 什么是 npm? 安装 npm 更新 npm ...
- Node npm包管理器介绍
NPM(重点) 介绍 npm(node package manage)node 包 管理器.管理node包的工具. 包是什么?包就是模块.(包约等于模块,一个包可以包括一个或多个模块) npm这个工具 ...
- 前端架构设计第一课 CI环境npm/Yarn
开篇词 像架构师一样思考,突破技术成长瓶颈 透过工程基建,架构有迹可循.你好,我是侯策(LucasHC),目前任职于某互联网独角兽公司,带领 6 条业务线前端团队,负责架构设计和核心开发.工程方案调研 ...
- npm的使用以及npx
npm 命令 npm 的使用 初始化 npm init 交互式初始化需要回答一系列问题.npm init -y 使用默认值,直接初始化. 安装依赖 npm支持一下几种依赖: 依赖类型 安装命令 说明 ...
- 浅学node以及npm总结
node学习总结 模块化 什么是模块化? 模块化,就是把一个大的文件拆分成若干小文件,而且还能把小文件通过特定的语法组合到一起的实现过程. 比如手机.电脑-等等几乎所有,都是模块化的设计,拿电脑来说, ...
最新文章
- hdu1693Eat the Trees(插头dp)
- 都2020 了,最流行的密码居然依旧是...
- Linux中如何用命令打开文件夹
- iOS10 CallKit简单开发
- jzoj3302-[集训队互测2013]供电网络【上下界网络流,费用流,动态加边】
- 简单的php,php简单语句
- python 获取麦克风声音_如何使用python和ffmpeg或simi读取实时麦克风音频音量
- Netty工作笔记0011---Channel应用案例2
- 学习成为一个IT架构师
- hive if语句_Hive实践(高阶篇)
- log4j不输出日志的解决方案
- android室内地图控件,[开源] Android InDoorView 室内选位控件
- 仅此一文让你明白ASP.NET MVC原理
- Django 分页 以及自定义分页
- 编写的第一个键盘软件
- opencv中的merge函数
- GIMP教程 4 图层
- 关于集训7教机房没网络 问题的解决方案
- 多模块渗透测试框架PTF
- bitbucket 代码备份
热门文章
- 2022-2028年中国激光玻璃行业市场供需规模及发展趋势研究报告
- Pinia轻量级状态管理
- nvGRAPH原理概述
- 服务器技术综述(一)
- 2021年大数据Flink(九):Flink原理初探
- C++ while 循环与 do...while 循环
- TypeError: to_bytes() missing required argument ‘byteorder‘ (pos 2)
- 如何在Fragment中使用findViewById
- Web Service 安全性解决方案(SOAP篇)
- java面向对象-------静态初始化块