玩转 NPM

永利澳门游戏网站 1

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

npm install -g xxx

NPM

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",
    }
}

npm本来是Node.js的包管理工具,但随着JS这几年的蓬勃发展,现在的npm已经成了几乎所有跟JS相关的工具和软件包的管理工具了,并且还在不断发展完善中。

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:开发依赖

本文从笔者的经验,总结了npm安装/卸载、更新、发布这几个最主要功能的正确使用姿势和一些小技巧,顺便从官网搬来了npm3处理依赖的重大变化。

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

就近原则,先在当前目录下的node_modules下面找,如果没找到,逐级往上找,直到根目录。

npm3

npm团队已经发布了npm3,近期有小伙伴吐槽npm3安装软件包的时候很慢,一开始笔者也感觉相比npm2慢了不少,但经过了几个版本的迭代,速度似乎又快起来了。

慢的同学是时候更新你的npm啦,而且之前安装进度条模糊成一坨的问题也已经修复了。

永利澳门游戏网站 2

npm v3.0安装react的截图

永利澳门游戏网站 3

npm v3.8安装react的截图

npm提供了大量的命令,所有的命令几乎都可以通过npm cmd
[options]的方式使用。

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

npm3相较于npm2而言优化了依赖包的管理。解决了windows上npm包目录太深的问题。
举个例子:
假如我们写了个模块App,需要安装两个包A@1和C@1,其中A@1依赖另一个包B@1,C@1依赖B@2,用npm2和npm3安装之后的依赖图分别是这样的

永利澳门游戏网站 4

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安装之后,包结构将变成下面这样

永利澳门游戏网站 5

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了,包结构会变成这样

永利澳门游戏网站 6

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,新的包结构将变成这样

永利澳门游戏网站 7

Paste_Image.png

可以看到出现了冗余,结果跟预期的不一样,既然所有对B的依赖都是B@2,那么只安装一次就够了。
npm dedupe
npm在安装包的时候没有这么“智能”,不过npm
dedupe命令做的事就是重新计算依赖关系,然后将包结构整理得更合理。
执行一遍npm dedupe将得到

永利澳门游戏网站 8

Paste_Image.png

npm -h

学习一个命令行工具,最简单直接的方式就是查看它的用户手册,npm提供了并不算很详细的命令行手册,可以通过npm
-h查看(unix用户还可以通过man
npm查看,相对来说比windows详细多了),需要某个npm命令更详细的文档则需要通过npm
help cmd如npm help install来查看,注意不是 npm install help
,这样将会安装help包。

另外npm cmd -h也是一个快速查看命令可以怎么使用和搭配哪些常用选项的方法。

yarn和 npm 相比有什么优势?

  • Yarn 有一个锁定文件 (lock file)
    记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn
    就会创建(或更新)yarn.lock
    这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本

  • Yarn在拉取包的时候,是采用了并行安装,所以相较于npm的列队安装的速度会快很多。

npm init

说到npm就不得不说package.json,每一个npm包都必须有一个package.json文件,年轻时候的我还傻乎乎的从其他地方拷贝package.json过来然后修改,为了自动化还写了个自动生成的脚本。

后来才发现原来npm自带此功能,官方原厂功能更好更强大,只需要执行npm
init即可,以交互方式完成package.json的创建。

如果想生成默认package.json,可以执行npm init
-y,连交互式界面都不会出现。

另外需要注意,npm
init的时候需要输入用户字段,如果还没有设置npm用户,需要通过npm
addUser设置。

事实上,最小单位的npm包就是只包含一个package.json文件的包,这样的话npm
init就完成了一个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
    )的功能让人眼前一亮。

发表评论

电子邮件地址不会被公开。 必填项已用*标注