高级5-npm使用、npmscript打造前端工作流、webpa

1： 如何全局安装一个 node 应用?

全局安装：package会被下载到特定的系统目录下，安装的package能够在所有目录下使用
npm install -g <package>
例如：
npm install -g jshint
优点：无论哪个目录都可以正常使用软件包。如果被墙建议打开科学上网工具，或者先安装npm install -g cnpm --
本地安装： package会被下载当前所在目录，只能在当前目录下使用
npm install <package>
例如：
npm install jshint
缺点：只能在对应安装目录下使用，如果其他目录想使用这个软件包那其他目录也要执行npm install jshint此命令。

附加部分：查看npm版本输入 npm -v
更新npm输入sudo npm install npm -g

2： package.json 有什么作用？

如果想发一个包，必须要发package.json，该文件夹告诉npm你这个包当前的版本及其他的相关信息，例如包的名字(别人搜索包时候的名字)，在每一次重新发布时候版本号必须更新，main指当前入口，便于他人引用入口。
例如：

3： npm install --save app 与 npm install --save-dev app有什么区别?

npm install --save app 自动把模块和版本号添加到dependencies部分
npm install --save-dev app 自动把模块和版本号添加到devdependencies部分

devdependencies是开发时依赖，比如你模块用了marked测试框架，那么你的模块的开发就依赖 marked，如果别人想为你的模块贡献代码，他就需要安装marked。但是只是使用你的模块的人，就不需要安装marked。

4： node_modules的查找路径是怎样的?

先再本身文件夹查找是否有node_odules文件夹，找不到再到上一级，找到便停止。找不到便继续往上一级查找直到根目录。

5： npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)

npm3与 npm2对比：
npm2安装所有的dependencies都是嵌套的方式，是树形结构。
npm3以平坦的方式安装dependencies，将dependencies安装在同一目录中，解决了npm2带来的冗长浪费空间的安装方式
两者主要的不同是：
不再区分dependencies的主次。
改变了node_modules文件的结构
例：
此时模块A依赖B模块

现某应用依赖模块A。执行npm install
npm3 将模块A和依赖的模块B平铺放入node_modules文件中
npm2是嵌套的模式放入

假设我们还需要依赖模块C，但是模块C依赖是高版本的B模块

然而B v1.0已经作为顶层依赖，我们无法将B v2.0作为顶层依赖，npm3将会默认npm2的嵌套型结构，不同的是将会把B v2.0模块放在所依赖它的C模块下面

在终端我们会看到如下文件结构

依赖关系列表和它们之间的关系可以使用npm ls

查看首要依赖可以使用npm ls --depth=0

yarn优点（来自官网介绍）：
1.缓存下载的每个软件包，因此它永远不需要再次下载它。它还将操作并行化以最大限度地利用资源，因此安装时间比以往更快。

2.其代码执行之前使用校验和来验证每个已安装软件包的完整性。

3.使用详细而简洁的lockfile文件和确定性的安装算法，能够保证在一个系统上的安装，也可以在其他系统上以相同工作方式运行。

4.无论安装顺序如何，相同的依赖关系都将以相同的方式安装在每台机器上。

5.如果您之前安装了一个软件包，则可以在没有任何互联网连接的情况下重新安装它。

6.从npm安装任何软件包，并保持软件包工作流程相同。

7.单个请求失败不会导致安装失败。请求在失败时重试。

8.解析不匹配的依赖版本为一个单一的版本来避免导致多个版本。

9.可以高效地队列化请求，使网络利用率最大化

yarn和npm不同点：
1.同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。

"1.0.3",//安装指定的1.0.3版本
"~1.0.3",//1.0.X中最新版本
"^1.0.3"//安装1.X.X中最新版本

在协同完成项目时由于依赖模块版本的不同会导致bug。

yarn的解决办法
为了保证包版本的错误匹配，精确版本号会被yarn的lock文件记录下来。每次模块的添加，Yarn会创建一个yarn.lock文件。这样就可以保证另一个机器安装的了完全相同的版本的包，并且同时在package.json里仍保存着一个充许的版本段。

在npm里shrinkwrap命令也会产生lock文件，然后npm在读取package.json之前会读取那个文件，跟Yarn读取yarn.lock类似。不同点是Yarn总是会自动的更新yarn.lock文件，而npm需要你自己去手动维护。
yarn.lock 文档

2.npm允许在包安装的时候运行代码，yarn不行

3.npm安装包是顺序执行，yarn可以并行安装

4.npm安装依赖包是树形结构

yarn安装包是这种字段

• npm install命令可以从package.json文件里安装依赖，并且允许你添加新的包。

• yarn install只能安装在yarn.lock或者packag.json里的列出来的依赖，以它们保存的顺序。

5.yarn add [–dev]
跟 npm install 类似，yarn add 让你添加并且安装一个依赖。如命令名所示，它会添加一个依赖并自动的保存相应的包到package.json，跟npm的--save标记一样。Yarn的--dev标记添加一个开发依赖，就象npm的--save-dev标记一样。

yarn add [package]
npm install [package]

6.yarn upgrade
这个命令将包升级到package.json规则指定的版本范围的最新版，而不是yarn.lock所定义的完全一致的版本。想要在npm达成一致的效果，你需要运行下面的命令：

rm -rf node_modules
npm install

这个命令不要跟npm update混淆了，npm update会升级所有的包到最新的版本。
yarn upgrade [package]

ps：如果安装包实在很慢时还是使用yarn安装会快一些

6： webpack是什么？和其他同类型工具比有什么优势？

一款模块加载器兼打包工具，有半个前端工作流功能，也是可以将模块打包到一起，能把各种资源JS/CSS/图片等都作为模块来使用和处理。

优势如下：
1.是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2.可以将代码拆分成多个区块，每个区块包含一个或多个模块，它们可以按需异步加载，极大地减少了页面初次加载时间。

3. 本身只能处理原生的 JS 模块，但是 loader 转换器可以将各种类型的资源转换成 JS 模块。这样，任何资源都可以成为 webpack 可以处理的模块。

4. 有智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。

5. 有功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 webpack 插件，来满足各式各样的需求。

6.使用异步 I/O 和多级缓存提高运行效率，使得它能够快速增量编译。

7：npm script是什么？如何使用？

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。

{
  "scripts": {
    "build": "node build.js"
  }
}

使用npm run命令可以执行脚本

npm run build
# 等同于执行
node build.js

这些定义在package.json里面的脚本，就称为 npm 脚本。
查看当前项目的所有 npm 脚本命令，可以使用不带任何参数的npm run命令:
npm run

npm默认的脚本值有

"start": "node server.js":
#执行使用npm start
"install": "node-gyp rebuild":
#执行使用npm install

"test": "echo \"文字"
#执行使用npm test

8： 使用 webpack 替换 入门-任务15中模块化使用的 requriejs

代码地址
webpack封装预览地址

该链接建议使用chrome浏览器打开会快一些，接口也可以顺利加载
如果新闻部分未显示建议您点击chrome浏览器右上方的加载不安全脚本按钮

9：gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp：

• 是一款nodejs应用
• 打造前端工作流的利器，打包、压缩、合并、git、远程操作...
• 简单易用，通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
• 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
• 插件质量高
• 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

var clean = require('gulp-clean'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    autoprefixer = require('gulp-autoprefixer');

var uglify = require('gulp-uglify')

图片压缩

gulp.task('dist:imgs', function(){
    gulp.src('src/imgs/*')
    .pipe(imagemin())//压缩图片
    .pipe(gulp.dest('dist/imgs'))//所有图片输出到dist文件中的imgs文件夹内
}) 

css压缩合并

gulp.task('dist:css', function(){
    gulp.src('dist/css/*').pipe(clean());//dist中css文件清空
    return gulp.src('src/**/*.less')//再将src中以less为结尾的文件拷贝过去
    .pipe(less())//将less文件转为css
    .pipe(cssnano())//压缩css文件
    .pipe(concat('merge.css'))//将所有css文件集成一个名为merge.css文件
    .pipe(autoprefixer({//自动添加一个前缀，看需求写
        browsers:['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('dist/css'))//merge.css被传入到dist/css文件夹中
})

js压缩合并

gulp.task('dist:js', function(){
    gulp.src('dist/js/*').pipe(clean());//dist中js文件清空
    return gulp.src('src/**/*.js')//再将src中以js为结尾的文件拷贝过去
    .pipe(uglify())//压缩js
    .pipe(concat('merge.js'))//将所有jd文件集成一个名为merge.js文件
    .pipe(gulp.dest('dist/js'))//merge.js被传入到dist/js文件夹中
}) 

//git bash简单方法调用
gulp.task('bulid', ['dist:imgs','dist:css','dist:js'])
//在git bash中输入gulp build就可调用以上三个任务

10： 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气，发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

npm install hunger-weather -g
weather

包下载地址

安装后的效果如下：