1: 如何全局安装一个 node 应用?
全局安装:package会被下载到到特定的系统目录下( /usr/local/lib/cdnode_modules/),安装的package能够在所有目录下使用。
cd 包名
2: package.json 有什么作用?
//package.json
{
"name": "plearner-demo0",//该node_module的名字
"version": "1.0.0",//向npm发布时,该node_module的版本号
"description": "this is a desrtiption of my test",// 对该模块的描述
"main": "text.js",//程序的入口文件,require该模块时,该模块从此文件开始执行
"scripts": {//执行命令行,目的是便于打造自动化流程,比如说在build中写可以压缩的方法。
//除了start和test执行方式为npm start/test,其他均为 npm run XXX
"test": "echo peng"
},
"keywords": [//在npm网站搜索时,通过搜索该关键字,可以找到该模块
"test"
],
"author": "plearner",//模块的作者
"license": "ISC",
"dependencies": {//该模块运行时需要依赖的其他模块,当其他人npm install该模块时,也会把该模块的依赖模块一并安装
"marked": "^0.3.6"
},
"devDependencies": {//编写该模块时,采用的开发工具,非必须,当其他人npm install该模块时,不会安装此开发依赖工具
"easytpl": "^1.0.4"
}
}
3: npm install --save app 与 npm install --save-dev app有什么区别?
- npm install --save app 和npm install --save-dev app 两个都是在当前文件夹安装app包,并且都是这个包所依赖的其他包
- --save 执行时,会自动更新 packge.json中的dependencies 。而 --save-dev 会更新 devDependencies, 开发依赖包。当我们发布包成功,别人下载时,会自动下载 dependencies。而开发依赖的包,不会被用户下载。
4: node_modules的查找路径是怎样的?
当require一个模块xxx时,会首先在当前目录下寻找node_modules下的xxx,若没有,则返回到上一级目录的node_modules下寻找xxx,最终会找到根目录下node_modules下的xxx。
所以全局安装到根目录后才可以在任何文件目录下使用命令。
5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势?
npm3对模块依赖目录的层次进行了改进
npm是node.js的包依赖管理工具,不过有的时候项目依赖过多,造成路径过深,超过了操作系统的文件深度限制。
npm3将传统的嵌套结构改为平铺结构。
即包以及包依赖的其他模块将会以同一层级安装在包使用者的node_modules下 ,如果版本有冲突,才会采用npm2的嵌套方式安装在各个包下。
npm3对模块依赖目录层次的改进
Yarn是一个新的Javascript包管理器
它由Facebook, Google, Exponent and Tilde开发者共同开发完成。Yarn 不是 NPM 的fork版本,而是它的重新设计,Yarn 定位为"快速、可靠、安全的依赖管理工具",目标是解决团队开发中使用 NPM 遇到的问题。
NPM 一些潜在的问题:
- 嵌套依赖 (npm 3.0版本已修复)
- 串行安装
- 单一个 package 来源(npmjs.com)
- 需要网络来安装软件包(尽管我们可以创建一个临时缓存)
- 允许程序包在安装时运行代码(不利于安全性)
- 不确定的包状态(不能确定项目的所有副本使用相同的包版本)
Yarn 解决方案:
- 单依赖包结构: 可以使用单一版本的依赖包,安装更快速,占用磁盘空间更少
- 并行安装: 并行下载依赖包,减少下载时间
- 多个包来源: Yarn 读取和安装 npmjs.com 和 Bower安装包,如果有个渠道down掉了,可以从另一个渠道下载包并安装
- 自动重试: 单个网络请求失败不会导致安装失败,请求在失败后会重试,这解决了由于临时网络问题而产生的构建异常
- 兼容 NPM: 从 NPM 切换到 Yarn 不需要做特殊兼容处理
- yarn.lock: 用来记录项目使用每个 javascript 包的确切版本。当将此文件提交至 SVN、GIT 等代码维护工具,可以保证项目的所有开发人员共享一套依赖包的版本号。
在package.json中,依赖的包版本可以被指定为一个范围,也可以不带版本号。这个可能会导致一种问题,团队内不同开发人员使用不同版本的软件包。从包管理器(Bundler)中借鉴,Yarn 创建了 yarn.lock文件,用来记录项目使用每个包的确切版本。
6: webpack是什么?和其他同类型工具比有什么优势?
webpack 是一款模块加载器兼打包工具,它能把各种资源 JS、CSS、图片等都作为模块来使用和处理。
webpack的核心是一切皆模块的思想,所以,任何模块,CSS,图片,字体,都被webpack当做模块来处理,我们只需要在需要这些模块的时候来require。
webpack的优势一:Code Splitting代码分割
过去,传输模块时有两个极端:
-
1.一个请求获取一个模块
(requirejs 每一个require的模块,对应的都是一条网络请求)- 优点:只传送所需的模块
- 缺点:许多请求意味着很多开销
- 缺点:因为请求的延迟,程序启动缓慢
-
2.一个请求获取所有模块
(r.js 把所有的模块都打包成一个网络请求)- 优点:请求开销减少,延迟小
- 缺点:暂时并不所需的模块也被传送
webpack将请求的模块组拆分成许多小块。
被复用的模块组被一次请求最开始就获取,最初不需要的模块的块则可以按需加载。 拥有初始下载量小,并在应用程序请求时按要求下载代码的优势。
webpack的优势二:Loaders加载器
通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。它可以取代gulp的压缩图片打包js等功能
webpack的优势三:Clever parsing解析
用 commonJS 来书写,对 AMD/CMD 支持也很全面。
webpack的优势四:插件系统
webpack具有丰富的插件系统。
7:npm script是什么?如何使用?
npm script 是利用packge.json中 script 这个属性,制定一个工作流。
简化命令行的使用。
"scripts": { //执行命令行,目的是便于打造自动化流程,比如说在build中写可以压缩的方法。除了start和test执行方式为npm start/test,其他均为 npm run XXX
"build": "echo build...",
"start": "echo start...",
"test": "echo \"Error: no test specified\" && exit 1"
}
8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs
9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是一款nodejs的插件,gulp能进行图片压缩,js打包实现前端工作流,它还含有丰富的插件,是前端工作中一款简单好用的利器。
glup安装及使用
$npm install gulp-cli -g //全局安装gulp,作为命令行工具是不能require到的
$npm install gulp -D //在当前项目的目录下安装gulp,才能require到,等于 npm install --save-dev gulp
$touch gulpfile.js //新建gulpfile.js文件
$gulp --help
gulp是一个对象,对象里有如下几个方法
gulp.src | gulp.dest | gulp.task | gulp.watch
参见gulp文档
gulp.src(globs[, options]):把哪些文件放入glup中处理,采用正则表达式的写法,可以是字符串或者数组,通过gulp转化成数据流
gulp.dest(path[, options]) 将数据流导出成文件
gulp.task(name [, deps] [, fn]) 创建任务,一个任务可以认为是一个流水线 [, deps] 依赖是并行的
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 监测文件内容的改动
gulp运行
终端运行gulp taskname
如果想要直接gulp就能运行,可以将原taskname改为default或者新建一个task,taskname为default
使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
#gulpfile.js文件中
var gulp = require('gulp');
//引入组件
var minifycss = require('gulp-minify-css'),//css压缩
uglify = require('gulp-uglify'),//js压缩
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
clean = require('gulp-clean'),//清空文件夹
minhtml = require('gulp-htmlmin'),//html压缩
jshint = require('gulp-jshint'),//js代码规范性检查
imagemin = require('gulp-imagemin');//图片压缩
gulp.task('html',function(){
return gulp.src('src/*.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
gulp.task('css',function(argument){
gulp.src('src/css/*.css')
.pipe(concat('merge.min.css'))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'));
});
gulp.task('js',function(argument){
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
});
gulp.task('img',function(argument){
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'));
});
gulp.task('clear', function(){ //清空文件夹
gulp.src('dist/*',{read: false})
.pipe(clean());
});
gulp.task('build',['html','css','js','img']);//运行gulp build的时候,相当于把html,css,js,img都运行了
10: 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。
在npm上搜索hunger-yuhuan2-weather
demo4/index.js
#!/usr/bin/env node //指明用node执行
var axios = require('axios')
console.log(process.argv) //process.argv获取输入的参数
var data = {}
if(process.argv[2]){
data.params = {
city: process.argv[2]
}
}
axios.get('http://api.jirengu.com/weather.php', data) //引用axios方法,类似的方法还有request
.then(function (response) {
var weather = response.data.results[0].weather_data[0]
console.log(weather.date)
console.log(weather.temperature)
console.log(weather.weather + ',' + weather.wind)
console.log('PM25:' + response.data.results[0].pm25)
})
.catch(function (error) {
console.log(error);
})
demo4/package.json
{
"name": "hunger-yuhuan2-weather",
"version": "1.0.0",
"description": "",
"main": "index.js",
"bin":{
"weather-yuhuan": "./index.js"
},
"scripts": { //执行命令行,目的是便于打造自动化流程,比如说在build中写可以压缩的方法。除了start和test执行方式为npm start/test,其他均为 npm run XXX
"build": "echo build...",
"start": "echo start...",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "yuhuan",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2"
}
}
还需要引入依赖axios
npm install --save axios
最后登陆&发布包
npm login
npm publish
使用
在控制台输入weather-yuhuan显示当前所在城市天气
输入weather-yuhuan XXX 显示XXX城市天气