高级5-npm使用、npmscript打造前端工作流、webpack使用、开发node应用

1: 如何全局安装一个 node 应用?

全局安装:package会被下载到特定的系统目录下,安装的package能够在所有目录下使用
npm install -g <package>
例如:
npm install -g jshint
优点:无论哪个目录都可以正常使用软件包。如果被墙建议打开科学上网工具,或者先安装npm install -g cnpm --
本地安装: package会被下载当前所在目录,只能在当前目录下使用
npm install <package>
例如:
npm install jshint
缺点:只能在对应安装目录下使用,如果其他目录想使用这个软件包那其他目录也要执行npm install jshint此命令。

附加部分:查看npm版本输入 npm -v
更新npm输入sudo npm install npm -g

2: package.json 有什么作用?

如果想发一个包,必须要发package.json,该文件夹告诉npm你这个包当前的版本及其他的相关信息,例如包的名字(别人搜索包时候的名字),在每一次重新发布时候版本号必须更新,main指当前入口,便于他人引用入口。
例如:


3: npm install --save app 与 npm install --save-dev app有什么区别?

npm install --save app 自动把模块和版本号添加到dependencies部分
npm install --save-dev app 自动把模块和版本号添加到devdependencies部分

devdependencies是开发时依赖,比如你模块用了marked测试框架,那么你的模块的开发就依赖 marked,如果别人想为你的模块贡献代码,他就需要安装marked。但是只是使用你的模块的人,就不需要安装marked。

4: node_modules的查找路径是怎样的?

先再本身文件夹查找是否有node_odules文件夹,找不到再到上一级,找到便停止。找不到便继续往上一级查找直到根目录。

5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)

npm3与 npm2对比:
npm2安装所有的dependencies都是嵌套的方式,是树形结构。
npm3以平坦的方式安装dependencies,将dependencies安装在同一目录中,解决了npm2带来的冗长浪费空间的安装方式
两者主要的不同是:
不再区分dependencies的主次。
改变了node_modules文件的结构
例:
此时模块A依赖B模块


现某应用依赖模块A。执行npm install
npm3 将模块A和依赖的模块B平铺放入node_modules文件中
npm2是嵌套的模式放入

假设我们还需要依赖模块C,但是模块C依赖是高版本的B模块

然而B v1.0已经作为顶层依赖,我们无法将B v2.0作为顶层依赖,npm3将会默认npm2的嵌套型结构,不同的是将会把B v2.0模块放在所依赖它的C模块下面

在终端我们会看到如下文件结构

依赖关系列表和它们之间的关系可以使用npm ls

查看首要依赖可以使用npm ls --depth=0

yarn优点(来自官网介绍):
1.缓存下载的每个软件包,因此它永远不需要再次下载它。它还将操作并行化以最大限度地利用资源,因此安装时间比以往更快。

2.其代码执行之前使用校验和来验证每个已安装软件包的完整性。

3.使用详细而简洁的lockfile文件和确定性的安装算法,能够保证在一个系统上的安装,也可以在其他系统上以相同工作方式运行。

4.无论安装顺序如何,相同的依赖关系都将以相同的方式安装在每台机器上。

5.如果您之前安装了一个软件包,则可以在没有任何互联网连接的情况下重新安装它。

6.从npm安装任何软件包,并保持软件包工作流程相同。

7.单个请求失败不会导致安装失败。请求在失败时重试。

8.解析不匹配的依赖版本为一个单一的版本来避免导致多个版本。

9.可以高效地队列化请求,使网络利用率最大化

yarn和npm不同点:
1.同一个项目,安装的时候无法保持一致性。由于package.json文件中版本号的特点,下面三个版本号在安装的时候代表不同的含义。

"1.0.3",//安装指定的1.0.3版本
"~1.0.3",//1.0.X中最新版本
"^1.0.3"//安装1.X.X中最新版本

在协同完成项目时由于依赖模块版本的不同会导致bug。

yarn的解决办法
为了保证包版本的错误匹配,精确版本号会被yarn的lock文件记录下来。每次模块的添加,Yarn会创建一个yarn.lock文件。这样就可以保证另一个机器安装的了完全相同的版本的包,并且同时在package.json里仍保存着一个充许的版本段。

在npm里shrinkwrap命令也会产生lock文件,然后npm在读取package.json之前会读取那个文件,跟Yarn读取yarn.lock类似。不同点是Yarn总是会自动的更新yarn.lock文件,而npm需要你自己去手动维护。
yarn.lock 文档

2.npm允许在包安装的时候运行代码,yarn不行

3.npm安装包是顺序执行,yarn可以并行安装

4.npm安装依赖包是树形结构


yarn安装包是这种字段

  • npm install命令可以从package.json文件里安装依赖,并且允许你添加新的包。

  • yarn install只能安装在yarn.lock或者packag.json里的列出来的依赖,以它们保存的顺序。

5.yarn add [–dev]
跟 npm install 类似,yarn add 让你添加并且安装一个依赖。如命令名所示,它会添加一个依赖并自动的保存相应的包到package.json,跟npm的--save标记一样。Yarn的--dev标记添加一个开发依赖,就象npm的--save-dev标记一样。

yarn add [package]
npm install [package]

6.yarn upgrade
这个命令将包升级到package.json规则指定的版本范围的最新版,而不是yarn.lock所定义的完全一致的版本。想要在npm达成一致的效果,你需要运行下面的命令:

rm -rf node_modules
npm install

这个命令不要跟npm update混淆了,npm update会升级所有的包到最新的版本。
yarn upgrade [package]

ps:如果安装包实在很慢时还是使用yarn安装会快一些

6: webpack是什么?和其他同类型工具比有什么优势?

一款模块加载器兼打包工具,有半个前端工作流功能,也是可以将模块打包到一起,能把各种资源JS/CSS/图片等都作为模块来使用和处理。

优势如下:
1.是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

2.可以将代码拆分成多个区块,每个区块包含一个或多个模块,它们可以按需异步加载,极大地减少了页面初次加载时间。

  1. 本身只能处理原生的 JS 模块,但是 loader 转换器可以将各种类型的资源转换成 JS 模块。这样,任何资源都可以成为 webpack 可以处理的模块。

  2. 有智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。

  3. 有功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 webpack 插件,来满足各式各样的需求。

6.使用异步 I/O 和多级缓存提高运行效率,使得它能够快速增量编译。

7:npm script是什么?如何使用?

npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

{
  "scripts": {
    "build": "node build.js"
  }
}

使用npm run命令可以执行脚本

npm run build
# 等同于执行
node build.js

这些定义在package.json里面的脚本,就称为 npm 脚本。
查看当前项目的所有 npm 脚本命令,可以使用不带任何参数的npm run命令:
npm run

npm默认的脚本值有

"start": "node server.js":
#执行使用npm start
"install": "node-gyp rebuild":
#执行使用npm install

"test": "echo \"文字"
#执行使用npm test

8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs

代码地址
webpack封装预览地址

该链接建议使用chrome浏览器打开会快一些,接口也可以顺利加载
如果新闻部分未显示建议您点击chrome浏览器右上方的加载不安全脚本按钮

9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp:

  • 是一款nodejs应用
  • 打造前端工作流的利器,打包、压缩、合并、git、远程操作...
  • 简单易用,通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
  • 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
  • 插件质量高
  • 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

var clean = require('gulp-clean'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    autoprefixer = require('gulp-autoprefixer');

var uglify = require('gulp-uglify')

图片压缩

gulp.task('dist:imgs', function(){
    gulp.src('src/imgs/*')
    .pipe(imagemin())//压缩图片
    .pipe(gulp.dest('dist/imgs'))//所有图片输出到dist文件中的imgs文件夹内
}) 

css压缩合并

gulp.task('dist:css', function(){
    gulp.src('dist/css/*').pipe(clean());//dist中css文件清空
    return gulp.src('src/**/*.less')//再将src中以less为结尾的文件拷贝过去
    .pipe(less())//将less文件转为css
    .pipe(cssnano())//压缩css文件
    .pipe(concat('merge.css'))//将所有css文件集成一个名为merge.css文件
    .pipe(autoprefixer({//自动添加一个前缀,看需求写
        browsers:['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('dist/css'))//merge.css被传入到dist/css文件夹中
})

js压缩合并

gulp.task('dist:js', function(){
    gulp.src('dist/js/*').pipe(clean());//dist中js文件清空
    return gulp.src('src/**/*.js')//再将src中以js为结尾的文件拷贝过去
    .pipe(uglify())//压缩js
    .pipe(concat('merge.js'))//将所有jd文件集成一个名为merge.js文件
    .pipe(gulp.dest('dist/js'))//merge.js被传入到dist/js文件夹中
}) 
//git bash简单方法调用
gulp.task('bulid', ['dist:imgs','dist:css','dist:js'])
//在git bash中输入gulp build就可调用以上三个任务

10: 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

npm install hunger-weather -g
weather

包下载地址

安装后的效果如下:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容