• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

玩转npm

JavaScript web前端中文站 4年前 (2017-04-15) 4471次浏览 已收录 38个评论

玩转 npm

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

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

 

npm3

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

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

npm v3.0 安装 react 的截图

玩转 npm

npm v3.8 安装 react 的截图

玩转 npm

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

npm -h

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

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

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 包的创建。

npm install/uninstall

npm install 作为 npm 最重要的功能和最常用的功能,不用过多说明,这里只介绍三个非常有用的选项–global,–save,–save-dev。

想必读者肯定知道–global 可以简写成-g,其实另外两个选项也有简写形式,–save 可以简写成-S,–save-dev 可以简写成-D,注意大写。

另外 npm install 也可以简写成 npm i,相应的卸载命令 npm uninstall 可以简写成 npm un,事实上 npm 的很多命令和选项在设计上都非常类似 unix 上的命令行功能,这里指的是命令和选项都可以极大化地简写,只要在不混淆的情况下。

npm uninstall 和 npm install 接受同样的选项和参数。

–save 的作用是在 packaje.json 的 dependencies 字段增加或者修改一个安装包和版本号名值对,–save-dev 则是修改 devDependencies,这样就不用安装了某个包之后手动修改 package.json,npm 已经帮我们把包依赖和版本管理做好了。

以安装 react 为例,

npm i react -S 将为 package.json 增加

npm i react -D 将增加

npm update

假如 react@15(版本号,下同)发布了,想尝鲜的小伙伴该怎么更新呢?

首先得知道 npm 上是否已经更新,npm info react 可以查看到 react 在 npm 上发布过哪些版本以及最新的版本,但是内容太多,让人眼花缭乱,配合 grep 会好一些。

其实我们只想知道 react 最新的版本,使用 npm dist-tags ls react 直接列出 react 发布过哪些 tag,

以及这些 tag 目前最新是哪些版本,比如最常用的 latest,也是默认 tag。

next tag 已经发布了 react@15 的第一个 rc 版了,尝鲜的朋友可以试一试了。

另外一个命令 npm outdated,会检测当前安装的所有 npm 包是否有更新,并列出可以更新的包,如果没有任何输出,那么恭喜你,所有的包都是不需要更新的。

如果之前安装的 react 版本是 0.14.3,同时还安装了 redux@3.2.0,执行 npm outdated 会输出

这种情况则说明 react 和 redux 该更新了,更新具体某个包使用 npm update package_name 即可,npm update 则会更新所有可更新的包。

npm publish

npm 作为一个大仓库,每天都有大量的新包发布上来,发布自己的包非常容易,而且几乎零门槛,对应的发布的命令是 npm publish,但前提是你需要一个 npm 账号。

假设已经有账号了,在发布之前需要使用 npm login 进行登录,正式发布之前请先阅读以下关于版本号的介绍。

npm 包的版本号一般都是 x.y.z 的形式。

其中 x 表示主版本号,通常有重大改变或者达到里程碑才改变;

y 表示次要版本号,或二级版本号,在保证主体功能基本不变的情况下,如果适当增加了新功能可以更新此版本号;

z 表示尾版本号或者补丁号,一些小范围的修修补补就可以更新补丁号。

第一版本通常是 0.0.1 或者 1.0.0,当修改了代码,需要更新版本号重新发布到 npm,不知道的小伙伴(年轻的我)肯定会手动修改 package.json 的 version 字段,而高级的玩法是直接使用 npm version <update_type>命令自动搞定。

详细用法可通过 npm help version 查看,这里只介绍最常用的三种。

三个选项分别对应三部分的版本号,每次运行命令会导致相应的版本号递增一,同时子版本号清零。

如果 npm 包同时又是一个 git 仓库,在运行了 npm version <update_type>和 npm publish 之后,npm 会自动给 git 仓库打上一个跟当前版本号一样的 tag,对于挂在 github 上的 npm 包很有用。

npm2 & npm3

上面介绍了 npm 包安装/卸载、更新和发布,几乎能满足日常使用了,另外再搬点干货过来。

npm3 虽然慢,但解决了 windows 上 npm 包目录太深的问题,相信使用过 npm1 或者 npm2 的都知道,node_modules 太多太深了,甚至一不小心就超过 windows 资源管理器能处理的最长路径长度了,听起来有点拗口,说白了这时候复制粘贴删除就会报错了。

已经使用过 npm3 的肯定会发现,npm3 将依赖模块扁平化存放了,node_modules 文件夹里面子文件夹增多了,出现了很多没有通过 npm install 安装过的模块。

npm3 在安装包的时候,由于每个包和包的依赖都会去计算是否需要再安装,搜索起来确实变慢了,好在至少现在的 npm3 速度还是可以接受的。

按照官方文档介绍,npm3 处理模块依赖的方式跟 npm2 很不一样。

以下是从官网搬的砖

npm 的依赖

假如我们写了个模块 App,需要安装两个包 A@1 和 C@1,其中 A@1 依赖另一个包 B@1,C@1 依赖 B@2,用 npm2 和 npm3 安装之后的依赖图分别是这样的

玩转 npm

npm3 按照安装顺序存放依赖模块,先安装 A@1,发现依赖模块 B@1 没有安装过也没有其他版本的 B 模块冲突,所以 B@1 存放在第一级目录,B@2 为了避免和 B@1 的冲突,还是继续放在 C@1 之下。

npm2 没什么好说的,来什么安装什么,根本不用理会公共依赖关系,依赖模块一层一层往下存放就是了,下面重点讲解 npm3 在这方面的改进。

现在 App 又需要安装一个包 D@1,D@1 依赖 B@2,使用 npm3 安装之后,包结构将变成下面这样

玩转 npm

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

玩转 npm

随着 App 升级了,需要把 A@1 升级到 A@2,而 A@2 依赖 B@2,把 E@1 升级到 E@2,E@2 也依赖 B@2,那么 B@1 将不会再被谁依赖,npm 将卸载 B@1,新的包结构将变成这样

玩转 npm

可以看到出现了冗余,结果跟预期的不一样,既然所有对 B 的依赖都是 B@2,那么只安装一次就够了。

npm dedupe

npm 在安装包的时候没有这么“智能”,不过 npm dedupe 命令做的事就是重新计算依赖关系,然后将包结构整理得更合理。

执行一遍 npm dedupe 将得到

玩转 npm

这才是最优且符合预期的结构,看来在每次安装/卸载了包之后最好重新执行 npm dedupe,以保证包结构是最优的。

npm3 通过将依赖模块扁平化安装,避免了冗余又解决了 windows 上一大头疼问题。


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:玩转 npm
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(38)个小伙伴在吐槽
  1. Hello there, There's no doubt that your web site may be having internet browser compatibility problems. When I look at your web site in Safari, it looks fine but when opening in I.E., it's got some overlapping issues. I merely wanted to give you a quick heads up! Aside from that, great site!
  2. Just wish to say your article is as amazing. The clearness in your post is simply excellent and i can assume you're an expert on this subject. Well with your permission allow me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please carry on the rewarding work.
  3. It's a pity you don't have a donate button! I'd most certainly donate to this superb blog! I suppose for now i'll settle for book-marking and adding your RSS feed to my Google account. I look forward to new updates and will talk about this website with my Facebook group. Talk soon!
  4. My developer is trying to convince me to move to .net from PHP. I have always disliked the idea because of the expenses. But he's tryiong none the less. I've been using Movable-type on various websites for about a year and am worried about switching to another platform. I have heard great things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any kind of help would be really appreciated!
  5. Hmm is anyone else experiencing problems with the images on this blog loading? I'm trying to find out if its a problem on my end or if it's the blog. Any suggestions would be greatly appreciated.
  6. My brother suggested I might like this web site. He was totally right. This post truly made my day. You can not imagine just how much time I had spent for this information! Thanks!
  7. Hello my loved one! I want to say that this post is amazing, great written and come with almost all significant infos. I would like to see more posts like this .
  8. Your method of describing everything in this piece of writing is truly nice, every one be able to without difficulty be aware of it, Thanks a lot.
  9. Its such as you read my mind! You seem to know so much approximately this, like you wrote the e book in it or something. I feel that you can do with a few % to pressure the message house a bit, however instead of that, that is great blog. An excellent read. I will definitely be back.
  10. We're a group of volunteers and opening a new scheme in our community. Your website provided us with valuable info to work on. You have done a formidable job and our whole community will be grateful to you.
  11. Hello to all, the contents present at this web page are really awesome for people knowledge, well, keep up the nice work fellows.
    ??????2020-12-09 05:30 回复
  12. Hello to all, the contents present at this web page are really awesome for people knowledge, well, keep up the nice work fellows.
    ??????2020-12-09 05:30 回复
  13. Hello to all, the contents present at this web page are really awesome for people knowledge, well, keep up the nice work fellows.
    ??????2020-12-09 05:29 回复
  14. Hello to all, the contents present at this web page are really awesome for people knowledge, well, keep up the nice work fellows.
    ??????2020-12-09 05:29 回复
  15. Great beat ! I would like to apprentice while you amend your website, how could i subscribe for a weblog web site? The account helped me a acceptable deal. I were a little bit familiar of this your broadcast provided bright transparent idea
    ???2020-11-30 22:30 回复
  16. Great beat ! I would like to apprentice while you amend your website, how could i subscribe for a weblog web site? The account helped me a acceptable deal. I were a little bit familiar of this your broadcast provided bright transparent idea
    ???2020-11-30 22:29 回复
  17. Great beat ! I would like to apprentice while you amend your website, how could i subscribe for a weblog web site? The account helped me a acceptable deal. I were a little bit familiar of this your broadcast provided bright transparent idea
    ???2020-11-30 22:29 回复
  18. This web site certainly has all the information I wanted concerning this subject and didn't know who to ask.
    ?????2020-11-29 09:47 回复
  19. This web site certainly has all the information I wanted concerning this subject and didn't know who to ask.
    ?????2020-11-29 09:46 回复
  20. This web site certainly has all the information I wanted concerning this subject and didn't know who to ask.
    ?????2020-11-29 09:45 回复
  21. Hurrah, that's what I was searching for, what a information! present here at this web site, thanks admin of this site.
    ??????2020-11-29 09:27 回复
  22. Hurrah, that's what I was searching for, what a information! present here at this web site, thanks admin of this site.
    ??????2020-11-29 09:27 回复
  23. Hurrah, that's what I was searching for, what a information! present here at this web site, thanks admin of this site.
    ??????2020-11-29 09:26 回复
  24. Hurrah, that's what I was searching for, what a information! present here at this web site, thanks admin of this site.
    ??????2020-11-29 09:26 回复
  25. Everyone loves it whenever people get together and share opinions. Great website, keep it up!
    ?????2020-11-28 00:40 回复
  26. Thank you for the auspicious writeup. It if truth be told was a entertainment account it. Glance complex to more delivered agreeable from you! By the way, how can we keep in touch?
    ??????2020-11-27 20:46 回复
  27. I enjoy, cause I found exactly what I used to be having a look for. You've ended my four day long hunt! God Bless you man. Have a nice day. Bye
    ?????2020-11-27 20:37 回复
  28. I'll immediately seize your rss as I can't to find your email subscription hyperlink or e-newsletter service. Do you've any? Kindly permit me realize in order that I may subscribe. Thanks.
    ??????2020-11-27 16:39 回复
  29. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a bit, but other than that, this is wonderful blog. An excellent read. I will definitely be back.
    ???2020-11-27 06:07 回复
  30. I'm not sure exactly why but this weblog is loading extremely slow for me. Is anyone else having this problem or is it a problem on my end? I'll check back later and see if the problem still exists.
    ??????2020-11-26 10:41 回复
  31. Thanks a lot for the article post.Much thanks again. Fantastic.
    Aidynn2020-07-01 07:01 回复
  32. Thanks so much for the post.Much thanks again. Really Cool.
    Epifan2020-07-01 04:36 回复
  33. Thanks so much for the post.Much thanks again. Really Cool.
  34. Thank you for this post. Its very inspiring.
    Laryssa2020-06-10 23:45 回复
  35. Thank you ever so for you post.Much thanks again.
    Alya2020-06-06 19:11 回复
  36. Thank you for this post. Its very inspiring.
    Jaymar2020-06-05 17:24 回复
  37. Some people, especially those running on busy daily schedules tend to use the pills to help maintain weight since they can not afford to follow all the diet programs. This is not advised. It is recommended that one seek advice from a professional in this field before using the pills. This can save one from many dangers associated with the misuse. The diet pills should always be taken whole. Some people tend to divide the pills to serve a longer period of time. This is not advised and can lead to ineffectiveness. If it is required that one takes a complete tablet, it means that a certain amount of the ingredients are required to achieve the desired goal. It is also recommended that one does not crush the pill and dissolve it in beverages. Chemicals found in beverages have the potential of neutralizing the desired nutrients in the pill thereby leading to ineffectiveness. The best way to take the tablets is swallowing them whole with a glass of water. The diet pills speed up the metabolic processes. This is the key factor that leads to the burning of all the fats in the body. This means that one passes out lots of urine, which subsequently leads to dehydration. It is imperative that the user take lots of water round the clock. This will help curb dehydration, which can lead to health problems. In addition to that, water offers the required medium for the function of the nutrients and elimination of the fats. When buying the review of diet pills, it is imperative that one gets the most recommended dose. People tend to compromise the quality and effectiveness of the tablets due to the variation in cost. The low priced pills depict poor quality, which means their effectiveness is not reliable. Some have also been found to cause health problems. The dose should also be taken as recommended. Over dose will not speed up the process but rather lead to complication. This will increase risk of side effects. If the taking of the pill is forgotten, do not take more to compensate for the lost time. The diet plan enclosed with the diet pills has also to be followed. According to the requirements, the termination of the diet must be done even with no results. This means your body is irresponsive.
    CaseyWrons2017-10-08 17:14 回复
  38. Do you feel like you have tried everything possible in order to lose weight? You are not alone--many people have the same problem. The following article is designed to give you tips that you may not have even known existed. By following these tips, you will reach your weight loss goal in no time.
    Angelotat2017-10-01 22:31 回复