34.npm/npmscript/gulp/webpack

1.如何全局安装一个 node 应用?
npm install -g <package_name>
2.package.json 有什么作用?

1.定义了模块的配置信息(名称、版本、许可证、依赖等),
2.通过命令npm install根据这个配置文件,下载所需模块配置环境,便于开发者之间的协作

3. npm install --save appnpm install --save-dev app有什么区别?

a.npm installl --save app会在package.json中的dependencies中添加运行时依赖,产品发布后仍需要依靠这些工具运行;
当下载一个node包时执行npm install可以安装dependencies下的依赖,而不会安装devDependencies下的依赖

"dependencies" {
  "axios": "^0.16.2"
}

b.npm install --save-dev app则会在devDependencies添加开发依赖,这些工具是开发时使用的,如gulp,产品发布后不需要使用这些工具。

"devDependencies": {
    "gulp": "^3.9.1"
}
4.node_modules的查找路径是怎样的?

首先是当前文件夹下的node_modules,然后向上一级查找node_modules,一直到根目录为止

5.npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势?

参考文献
1.Yarn vs npm: 你需要知道的一切
2.玩转npm
3.一文看懂npm、yarn、pnpm之间的区别
4.npm 依赖解决方案

a.npm3与 npm2相比有什么改进?

  • npm3将依赖模块扁平化存放,减轻了npm2中过长依赖嵌套的问题

b.Yarn和 npm 相比有什么优势?

  • Yarn默认每次安装应用都会创建或更新yarn.lock文件,以此保证其他机器安装相同版本的依赖
  • 默认情况下Yarn的安装速度更快,Yarn并行下载和安装
  • Yarn支持离线安装
  • Yarn在每个安装包的代码执行前使用校验码验证包的完整性
6. webpack是什么?和其他同类型工具比有什么优势?

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

  • webpack将项目当做一个整体,通过给定的入口文件(如:index.js),找到你的项目的所有依赖文件,使用loaders和plugins来处理它们;(与gulp相比,gulp是对每一种资源单独处理,并没有整体的概念)
  • webpack将所有资源都视为模块,所以诸如less,json,jpg等各种资源都可以被处理;
  • webpack根据需要将文件切分,避免模块过多导致的请求过多,也避免只请求一次,文件过大导致的加载缓慢问题。(与r.js requirejs)
7. npm-scripts是什么?如何使用?

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

通过它,可以进行很多快捷操作。

以下为一个package.json中的scripts片段;

如下,命令行执行npm run build相当于执行node index.js
本地安装webpack后,命令行执行npm run webpack相当于执行./node_modules/webpack/bin/webpack.js

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"node index.js",
    "webpack": "webpack",
    "server": "webpack-dev-server --open"
  },

其中test,start等npm固有命令,可以通过npm {name},其他自定义name通过npm run {name}来执行

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

预览链接
webpack配置文件

打包前后目录结构
9.gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp是一款打造前端自动化工作流的node应用,包括:打包,压缩,合并,git,远程操作等;

//gulpfile.js
var gulp = require('gulp')

var imagemin = require('gulp-imagemin');
var csso = require('gulp-csso');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('img',function () {  //图片压缩
    gulp.src('src/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'))
})

gulp.task('css',function () {  //css压缩合并
    gulp.src('src/css/*.css')
       .pipe(csso())
       .pipe(concat('merge.css'))
       .pipe(gulp.dest('dist/css/'))
})

gulp.task('js',function () {  //js压缩合并
    gulp.src('src/**/*.js')
        .pipe(uglify())
        .pipe(concat('merge.js'))
        .pipe(gulp.dest('dist/js'))
})

gulp('default',['img','css','js'])  //命令行执行gulp即可
10.开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口)

weather应用-npm地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,386评论 1 32
  • 题目1: 如何全局安装一个 node 应用? Node模块采用npm install命令安装。 每个模块可以“全局...
    萧雪圣阅读 1,732评论 0 1
  • 题目1: 如何全局安装一个 node 应用? “全局安装”指的是将一个模块安装到系统目录中,各个项目都可以调用。一...
    saintkl阅读 269评论 0 0
  • 1. 如何全局安装一个 node 应用? 在终端输入npm install -g pkg pkg为安装包的名字pk...
    _李祺阅读 201评论 0 1
  • 1: 如何全局安装一个 node 应用? 全局安装:package会被下载到到特定的系统目录下( /usr/loc...
    yuhuan121阅读 365评论 0 0