题目1: 如何全局安装一个 node 应用?
npm install -g webpack
题目2: package.json 有什么作用?
每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
{
"name": "Hello World",
"version": "0.0.1",
"author": "张三",
"description": "第一个node.js程序",
"keywords":["node.js","javascript"],
"repository": {
"type": "git",
"url": "https://path/to/url"
},
"license":"MIT",
"engines": {"node": "0.10.x"},
"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
"contributors":[{"name":"李四","email":"lisi@example.com"}],
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
"devDependencies": {
"bower": "~1.2.8",
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"browserify": "2.36.1",
"grunt-browserify": "~1.3.0",
}
}
题目3: npm install --save app 与 npm install --save-dev app有什么区别?
如果一个模块不在package.json文件之中,可以单独安装这个模块,并使用相应的参数,将其写入package.json文件之中。
$ npm install express --save
$ npm install express --save-dev
上面代码表示单独安装express模块,--save参数表示将该模块写入dependencies属性,--save-dev表示将该模块写入devDependencies属性。
题目4: node_modules的查找路径是怎样的?
就近原则,先在当前目录下的node_modules下面找,如果没找到,逐级往上找,直到根目录。
题目5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
已经出来npm5了。。。。
Yarn的优点:
速度快。速度快主要来自以下两个方面
并行安装:无论 npm 还是 Yarn 在执行包的安装时,都会执行一系列任务。npm 是按照队列执行每个 package,也就是说必须要等到当前 package 安装完成之后,才能继续后面的安装。而 Yarn 是同步执行所有任务,提高了性能。
离线模式:如果之前已经安装过一个软件包,用Yarn再次安装时之间从缓存中获取,就不用像npm那样再从网络下载了。
安装版本统一:为了防止拉取到不同的版本,Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages,但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件,在执行 npm install 的时候,该锁定文件会先被读取,和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于,Yarn 默认会生成这样的锁定文件,而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件,只有当这个文件存在的时候,packages 版本信息才会被记录和更新。
更简洁的输出:npm 的输出信息比较冗长。在执行 npm install <package> 的时候,命令行里会不断地打印出所有被安装上的依赖。相比之下,Yarn 简洁太多:默认情况下,结合了 emoji直观且直接地打印出必要的信息,也提供了一些命令供开发者查询额外的安装信息。
多注册来源处理:所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。
更好的语义化: yarn改变了一些npm命令的名称,比如 yarn add/remove,感觉上比 npm 原本的 install/uninstall 要更清晰。
原文
题目6: webpack是什么?和其他同类型工具比有什么优势?
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
webpack,相比其他竞争者,他的好处有
- 模块来源广泛,支持包括npm/bower等等的各种主流模块安装/依赖解决方案
- 模块规范支持全面,amd/cmd以及shimming等一应具全
- 浏览器端足迹小,移动端友好,却对热加载乃至热替换有很好的支持
- 插件机制完善,实现本身实现同样模块化,容易扩展
题目7:npm script是什么?如何使用?
scripts指定了运行脚本命令的npm命令行缩写,比如start指定了运行npm run start时,所要执行的命令。
下面的设置指定了npm run preinstall、npm run postinstall、npm run start、npm run test时,所要执行的命令。
"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
题目8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs
题目9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。
gulp 实现图片压缩
第一步、在命令行输入
npm install --save-dev gulp-imagemin
前提是要安装了 gulp
第二步、创建 gulpfile.js 文件编写代码
// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function() {
// 1. 找到图片
gulp.src('images/*.*')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function() {
gulp.watch('images/*.*', ['images'])
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task('default', ['images', 'auto'])
CSS 压缩合并
第一步、在命令行输入
npm install gulp-minify-css
第二步、创建 gulpfile.js 文件编写代码
// 获取 gulp
var gulp = require('gulp')
// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require('gulp-minify-css')
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1. 找到文件
gulp.src('css/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 css 任务
gulp.watch('css/*.css', ['css'])
});
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 css 任务和 auto 任务
gulp.task('default', ['css', 'auto'])
JS 压缩合并
第一步、
npm install gulp-uglify
第二步、
// 获取 gulp
var gulp = require('gulp')
// 获取 uglify 模块(用于压缩 JS)
var uglify = require('gulp-uglify')
// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
// 1. 找到文件
gulp.src('js/*.js')
// 2. 压缩文件
.pipe(uglify())
// 3. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改,当文件被修改则执行 script 任务
gulp.watch('js/*.js', ['script'])
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])