高级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'
}
};
题目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