npm

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的优势:

  1. webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
  2. 能被模块化的不仅仅是 JS 了。
  3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
  4. 扩展性强,插件机制完善,特别是支持 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'])
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容