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安装之后的依赖图分别是这样的
npm3按照安装顺序存放依赖模块,先安装A@1,发现依赖模块B@1没有安装过也没有其他版本的B模块冲突,所以B@1存放在第一级目录,B@2为了避免和B@1的冲突,还是继续放在C@1之下。
npm2没什么好说的,来什么安装什么,根本不用理会公共依赖关系,依赖模块一层一层往下存放就是了,下面重点讲解npm3在这方面的改进。
现在App又需要安装一个包D@1,D@1依赖B@2,使用npm3安装之后,包结构将变成下面这样
虽然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了,包结构会变成这样
随着App升级了,需要把A@1升级到A@2,而A@2依赖B@2,把E@1升级到E@2,E@2也依赖B@2,那么B@1将不会再被谁依赖,npm将卸载B@1,新的包结构将变成这样
可以看到出现了冗余,结果跟预期的不一样,既然所有对B的依赖都是B@2,那么只安装一次就够了。
npm dedupe
npm在安装包的时候没有这么“智能”,不过npm dedupe命令做的事就是重新计算依赖关系,然后将包结构整理得更合理。
执行一遍npm dedupe将得到
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
红色框里的就是npm script
,我们先可以试试看。
在命令行中输入 npm test
之后就自动执行了宽中定义的内容。
我们也可以自己自定义,当时只能定义npm规定的一些字符
但是不按照这些定义也可以,当时在运行的时候 需要
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'])