高级5 npm webpack

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

在终端输入 npm install -g 应用名 windows系统默认安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules目录下

题目2： package.json 有什么作用？

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
可以手动创建，也可以输入npm init 命令创建

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

都会下载在当前目录下，会记录在package.json文件里面， npm install --save app会将
文件名和版本信息记录在

dependencies": {
        "文件名"："版本号"
    },

npm install --save-dev会将文件名和版本信息记录在

devDependencies": {
    "文件名"：“版本信息”
    }

如果把包发布出去，别人安装的时候，记录在dependencies中的包会下载下来，记录在devDependencies的依赖不会下载下来。

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

向上寻址直到根目录下面。如现在的所在的位置在C:\Users\Administrator\Desktop\d
会在d中找node-modules，没有的话向上寻址

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

NPM3将传统的嵌套结构改为了平铺结构
比如，有一个模块A，依赖 B.

A depends on B

现在有个应用依赖A，运行
npm install
npm3会将模块B放置到与A同级目录下
而npm2会将B放置到A的依赖模块目录下

npm2 vs 3
如果有另外一个模块C，它依赖了一个不同版本的依赖模块B
new module dep C
在npm3中，不同版本的模块B会放置到C的依赖模块下
nested dep

Yarn

通过 lockfiles 文件以及一个确定性的、可靠的安装算法，解决了版本问题和 npm 的不确定性问题。Lockfile 文件把安装的软件包版本锁定在某个特定版本，并保证 node_modules 目录在所有机器上的安装结果都是相同的。Lockfile 还使用简洁的有序键名的格式，保证了每次的文件变化最小化，进行代码审查也更为简单。

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

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

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

在package有一个字段是script，里面可以添加json格式的key/value的内容。
value可以是一些npm或者其他工具的命令语句。以npm为例，如果key的值是的下面值时下面之一时，可以直接npm key 运行key对应的value的命令；如果key不属于下面之一，则可以通过npm run key的方式来运行该key对应的value的值；

微信图片_20170726112551.png

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

\\app.js
var Gotop=require('./gotop.js')//引入回到顶部模块
var Carousel=require('./carousel.js')//引入轮播模块
var waterfall=require('./watefall.js')//引入瀑布流模块

var $=require('jquery')//引入jquery
new Gotop($('.six-page'))//调用模块
Carousel.init($('.ct'))
waterfall()

//webpack.config.js
var path = require('path')
module.exports={
    entry:'./src/js/app.js',
    output:{
        path:__dirname+'/bin',
        filename:'app.bundle.js'
    }
};

github预览地址

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

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

//gulpfile.js代码部分
var gulp=require('gulp');
var cssnano=require('gulp-cssnano');//css压缩
var concat=require('gulp-concat');//文件合并
var uglify = require('gulp-uglify');//js压缩
var imagemin=require('gulp-imagemin')//image压缩

gulp.task('css',function(){
    gulp.src('./src/css/*.css')
    .pipe(concat('index-merge.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css/'))
})
gulp.task('js',function(){
    gulp.src('src/js/*.js')
    .pipe(concat('merge.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})
gulp.task('img',function(){
    gulp.src('src/imgs/*.jpg')
    .pipe(imagemin()
    .pipe(gulp.dest('dist/imgs'))
})
然后在当前目录，执行gulp+task第一个参数的方式调用

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

npm地址
npm install hunger-weather -g
weather