1. 如何全局安装一个 node 应用?
npm install -g xxx
2.package.json 有什么作用？
package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
下面是一个比较完整的package.json文件。
{
//name是项目名称
"name": "Hello World",
//version是版本号 一般遵守（大版本.次要版本.小版本”的格式）
"version": "0.0.1",
//author作者
"author": "张三",
//description描述
"description": "第一个node.js程序",
//keyword是关键字方便npm search的搜索
"keywords":["node.js","javascript"],
"repository": {
"type": "git",
"url": "https://path/to/url"
},
//license是指定一个许可证，让人知道使用的权利和限制的
"license":"MIT",
//engines你可以指定工作的node的版本
"engines": {"node": "0.10.x"},
//bugs是你项目的提交问题的url和（或）邮件地址。你可以指定一个或者指定两个。如果你只想提供一个url，那就不用对象了，字符串就行。
"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
"contributors":[{"name":"李四","email":"lisi@example.com"}],
//scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。
"scripts": {
"start": "node index.js"
},
//dependencies字段指定了项目运行所依赖的模块
"dependencies": {
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
//devDependencies指定项目开发所需要的模块。
"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有什么区别?
当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。
--save和--save-dev可以省掉你手动修改package.json文件的步骤。
npm install --save module-name 自动把模块和版本号添加到dependencies部分
npm install --save-dve module-name 自动把模块和版本号添加到devdependencies部分
dependencies：生产依赖
devdependencies：开发依赖
4.node_modules的查找路径是怎样的?
就近原则，先在当前目录下的node_modules下面找，如果没找到，逐级往上找，直到根目录。
5.npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势?
npm3相较于npm2而言优化了依赖包的管理。解决了windows上npm包目录太深的问题。
举个例子：
假如我们写了个模块App，需要安装两个包A@1和C@1，其中A@1依赖另一个包B@1，C@1依赖B@2，用npm2和npm3安装之后的依赖图分别是这样的
Paste_Image.png
npm3按照安装顺序存放依赖模块，先安装A@1，发现依赖模块B@1没有安装过也没有其他版本的B模块冲突，所以B@1存放在第一级目录，B@2为了避免和B@1的冲突，还是继续放在C@1之下。
npm2没什么好说的，来什么安装什么，根本不用理会公共依赖关系，依赖模块一层一层往下存放就是了，下面重点讲解npm3在这方面的改进。
现在App又需要安装一个包D@1，D@1依赖B@2，使用npm3安装之后，包结构将变成下面这样
Paste_Image.png
虽然C@1和D@1都依赖B@2，但是由于A@1先安装，A@1依赖的B@1已经安装到第一级目录了，后续需要安装的所有包B，只要版本不是1，都需要避免和B@1的冲突，所以只能像npm2一样，安装在相应包下面。
接着又安装了一个E@1，依赖B@1，因为B@1已经安装过，且不会有版本冲突，这时候就不用重复安装B@1了，包结构会变成这样
Paste_Image.png
随着App升级了，需要把A@1升级到A@2，而A@2依赖B@2，把E@1升级到E@2，E@2也依赖B@2，那么B@1将不会再被谁依赖，npm将卸载B@1，新的包结构将变成这样
Paste_Image.png
可以看到出现了冗余，结果跟预期的不一样，既然所有对B的依赖都是B@2，那么只安装一次就够了。
npm dedupe
npm在安装包的时候没有这么“智能”，不过npm dedupe命令做的事就是重新计算依赖关系，然后将包结构整理得更合理。
执行一遍npm dedupe将得到
Paste_Image.png
yarn和 npm 相比有什么优势?
-
Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本
-
Yarn在拉取包的时候，是采用了并行安装，所以相较于npm的列队安装的速度会快很多。
6. webpack是什么？和其他同类型工具比有什么优势？
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
webpack的优势：
- webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
7.npm script是什么？如何使用？
就是npm的脚本语句呀，作用就是可以只写一个指令，然后完成很多操作。就好像游戏里面的定义宏，你按一个键，可以丢出一堆技能。减少了很多操作。
首先你需要一个package.json
package.json
红色框里的就是npm script，我们先可以试试看。
npm
在命令行中输入 npm test之后就自动执行了宽中定义的内容。
我们也可以自己自定义，当时只能定义npm规定的一些字符
image.png
但是不按照这些定义也可以，当时在运行的时候 需要
npm run 你定义的
8. 使用 webpack 替换 入门-任务15中模块化使用的 requriejs
9.gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是基于流的自动化构建工具。可以自动对css，js还有图片进行压缩。和npm script的概念是一样的，用一个指令批量处理一堆事情，不过gulp可以做的要多很多。
** 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'])
网友评论