npm、npmscripts、webpack介绍

npm常见命令

npm install -g app-name

webpack命令

  • 显示npm下载包时,发的每一个请求:npm config set loglevel http
  • 关闭npm显示的进度条:npe config set process false

package.json 有什么作用?

每个项目下面都有一个package.json文件,定义了这个项目中所需要的模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令会根据这个配置文件,自动下载所需要的模块,也就是配置项目所需的运行和开发环境。

package.json可以手动编写,也可以通过npm init自动生成,有了package.json,就可以通过npm install安装其中指定的模块

一个package.json的例子:

{
    "name": "Hello World",
    "version": "0.0.1",
    "author": "张三",
    "description": "第一个node.js程序",
    "keywords":["node.js","javascript"],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",
    "engines": {"node": "0.10.x"},
    "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
    "contributors":[{"name":"李四","email":"lisi@example.com"}],
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "latest",
        "mongoose": "~3.8.3",
        "handlebars-runtime": "~1.0.12",
        "express3-handlebars": "~0.5.0",
        "MD5": "~1.2.0"
    },
    "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",
    }
}
  • name: 项目名称
  • version:项目版本
  • scripts: 指定了运行脚本命令的npm命令行缩写,"start": "node index.js"——当执行npm run start时,会执行node index.js命令
  • dependencies字段和devDependencies字段
    dependencies字段指定了项目运行所依赖的模块,devDependencies字段指定了项目开发所需要的模块。
    他们都指向一个对象。该对象的各个成员,分别由“模块名”和“对应的版本要求组成”,表示依赖的模块和版本范围
{
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

对应的版本加上各种限定,主要有以下几种:

  • 指定版本:例如:1.2.2,遵循的是“大版本.次要版本.小版本”的格式,安装时,只安装指定版本
  • 波浪号+指定版本:例如:~1.2.2,表示安装1.2.x的最新版本,版本不小于1.2.2,同时不大于1.3.x,也就是安装时不改变大版本和次要版本。
  • 插入号+指定版本:例如:^1.2.2,表示安装1.x.x的最新版本(不低于1.2.2),但是不安装2.x.x的版本,也就是说不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。
  • latest:安装最新版本

如果一个模块不在package.json文件之中,可以通过
npm install module --save
npm install module --save-dev
这两个命令安装,
--save参数:表示将模块写入“dependencies”属性中
--save-dev参数:表示将模块写入“devDependencies”属性中

  • bin字段
    该项用于定义执行内部命令时,指定的可执行文件的位置,可与script项配合使用
"bin": {
  "someTool": "./bin/someTool.js"
}

上面代码指定,someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件,在node_modules/.bin/目录下建立符号链接。在上面的例子中,someTool.js会建立符号链接npm_modules/.bin/someTool。由于node_modules/.bin/目录会在运行时加入系统的PATH变量,因此在运行npm时,就可以不带路径,直接通过命令来调用这些脚本。

因此,像下面这样的写法可以采用简写。

scripts: {  
 start: './node_modules/someTool/someTool.js build'
}
// 简写为
scripts: {  
 start: 'someTool build'
}

所有node_modules/.bin/目录下的命令,都可以用npm run [命令]的格式运行。在命令行下,键入npm run,然后按tab键,就会显示所有可以使用的命令。

  • main字段
    该字段指定了加载的入口文件。这个字段的默认值,就是模块根目录下的index.js文件

  • config字段
    该字段用于添加命令行的环境变量

    下面是一个package.json文件。

{
"name" : "foo",
"config" : { "port" : "8080" },
"scripts" : { "start" : "node server.js" }
}

---
##  npm install --save app 与 npm install --save-dev app有什么区别?
`npm install --save app`: 在当前目录下安装模块,并将模块添加到`package.json`中的`dependencies`属性中
`npm install --save-dev app`:与`npm install --save app`命令类型,只不过是将模块添加到`packag.json`中的`devDependencies`属性中

---

## node_modules的查找路径是怎样的?
node_modules的模块查找路径,说到底就是通过`require()`函数引入模块时的查找路径。
>当 Node 遇到 require(X) 时,按下面的顺序处理。
1. 如果X是内置模块,如: `require('http')`
  a. 返回该模块,
  b. 不再继续执行
2. 如果X是以 `"./"` 或 `"/"` 或 `"../"` 开头
  a. 根据X所在的父模块,确定X的绝对地址
  b. 将X当成文件,依次查找下面的文件,只要有一个存在,就返回该文件,不再继续执行
  - X
  - X.js
  - X.json
  - X.node

>  c. 将X当成目录,依次查找一下文件,只要有一个存在,就返回该文件,不再继续执行
  - X/package.json(中的main字段)
  - X/index.js
  - X/index.json
  - X/index.node
3. 如果X不带路径
  a. 根据X所在的父模块,确定X可能的安装目录
  b. 依次在每个目录中,将X当成文件或目录名加载
4. 抛出 "not found"

一个例子:
当前脚本文件`/home/ry/project/foo.js`执行了`require('bar')`,属于上面的第3种情况,Node内部运行过程如下:
首先,确认X的绝对路径可能是下面的几种情况,依次查找:
>- /home/ry/project/node_modules/bar
- /home/ry/node_modules/bar
- /home/node_modules/bar
- /node_modules/bar

搜素时,Node先将bar当成文件名,依次尝试加载下面这些文件,只要有一个成功就返回
> - bar
- bar.js
- bar.json
- bar.node

如果都不成功,说明bar可能是目录名,于是依次尝试加载下面这些文件
> - bar/package.json(main字段)
- bar/index.js
- bar/index.json
- bar/index.node

如果在所有对应的目录中,都无法找到对应的目录或文件,就抛出一个错误
参考:[require() 源码解读](http://www.ruanyifeng.com/blog/2015/05/require.html)

---

## npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
npm3对于包的依赖处理不同于npm2
**npm2**:按照一个嵌套方式安装所有依赖
**npm3**:试图减轻树的深度和冗余的嵌套,将传统的嵌套结构改为平铺结构

**yarn与npm相比的优势**:
- yarn.lock 文件
  Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本。
- 并行安装
- 更简洁的输出
[Yarn vs npm:你需要知道的一切](https://zhuanlan.zhihu.com/p/23493436)

---

## webpack是什么?和其他同类型工具比有什么优势?
webpack是一个JavaScript应用程序的**模块打包器**。当使用webpack处理应用程序时,它会递归的构建一个**依赖关系图**,其中包含应用程序需要的每个模块,然后将应用程序打包成少量的**bundler**——通常只有一个,由浏览器加载。

与其他打包工具相比,webpack具有:
- **代码分割**:
- **Loaders**:通过Loader机制,可以将各种类型的资源转换为js的模块
- **插件机制**:拥有非常丰富的插件

---

## npm script是什么?如何使用?
npm script是package.json中的一个属性,利用该属性可以自定义一些脚本命令
通过: `npm run xxx`来执行xxx命令,如果xxx是npm中的默认命令,则无需添加run,直接使用`npm xxx`即可。
如:
```js 
{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

执行: node run build 即可执行node build.js命令


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

演示地址


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

gulp是一款基于数据流的自动化构建工具

一个gulpfile.js文件
// 载入模块
var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    minhtml = require('gulp-htmlmin'),
    notify = require('gulp-notify'),
    md5 = require('gulp-md5-plus');


// css任务
gulp.task('css', function() {
  gulp.src('dist/css/*').pipe(clean());
  return gulp.src('./www/src/css/*.css')
   //      .pipe(concat('merge.min.css'))
           .pipe(minifycss())
         .pipe(md5(10, 'dist/index.html'))
           .pipe(gulp.dest('dist/css/'));
});

// html任务
gulp.task('html', function(){
  return gulp.src('./www/src/index.html')
         .pipe(minhtml({collapseWhitespace: true}))
         .pipe(gulp.dest('dist'))
});

// js任务
gulp.task('js', function(){
  gulp.src('./dist/app.bundle.js')
      .pipe(jshint())
      .pipe(concat('merge.min.js'))
      .pipe(uglify())
      .pipe(gulp.dest('dist/js/'))
});

// img任务
gulp.task('img', function(){
  gulp.src('www/imgs/*')
      .pipe(imagemin())
      .pipe(gulp.dest('dist/imgs'))
});

// clean任务
gulp.task('clear', function(){
  gulp.src('./dist/*', {read: false})
      .pipe(clean());
});

gulp.task('build', ['html', 'css', 'js', 'img']);

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

包地址:npm install -g hexon-hunger-weather2

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

推荐阅读更多精彩内容

  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,203评论 2 36
  • npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具...
    build1024阅读 7,679评论 0 8
  • Node.js使得在服务器端使用JavaScript编写应用程序成为可能。它是基于V8Javascript运行时并...
    间阳幕宾阅读 1,523评论 0 5
  • 大家好,我是IT修真院深圳分院第3期的学员,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网前端工程师...
    大大头大阅读 2,891评论 0 1
  • JavaScript 模块化编程 网站越来越复杂,js代码、js文件也越来越多,会遇到什么问题? 命名冲突; 文件...
    magic_pill阅读 1,345评论 0 1