封面动物

大脑腐

前语

本阐明面向的是小白,初学者等,对npm不了解,或了解,可是不会的人看的。
大佬绕行,不必看的,本文废话贼多。
写作意图如下:
  • 为今后写其他文章,笔记,供给独立的辅佐阐明
  • 回忆总结已知常识点
写作方针如下:
  • 通俗, 7 | z : } { `易懂的由浅入深的解说npm
  • 内容要生动风趣!
  • 内容要生动风趣!
  • 内容要生动风趣!
欢迎大佬,同僚们指出过错,我也同时学习了。笔芯~

开端闲白儿

一说npm让我想到了她
她熄灭了烟 说起从前
她说前半生就这样吧 还有明天
她回身而去
我问她不走可E – a不能够?
她问道:我不走你养我啊!
我坚决的告诉她,是P . c的,我养你呀!
她讪笑的说:你配吗?
………………….8 1 m { j U d…………..
真的E p J,各位同学,我没有骗你们!npm真的是“你配吗”的缩写!千真万确!咱们这次要学习的也是如何配的上npm.
好了,能够了,回归沉着吧。
关于npm入门呢,先看我写的下面这篇V u G [ s 5 R )装置阐明,涵盖了几点我其时学习的疑问,并且手摸手的教你如何装置Node.js环境和npm。
此为必要根底,必定要看。

Node.+ d ojs和npm装置与答疑解惑

juejin.im/post/5ee5f / G )e2…

正式开端

npm 机翻中文官网
npm全称% ! j O w Y为Node Package Man5 u % tager,是一个依据Node4 T # [ T m g.js的包办理器,也是整个Node.js社区最流行、支撑a i @ ` / ~ y的第三方模块最多的包办理器。
npm 由三个独立的部分组成:
  • 网站 –是开发者查找包(package)、设置参数以及办理 npm 运用体会的首要途径。
  • 注册表 –是一个巨/ i F y大的数据库,保存了每个包(package)的信息。
  • 指令行东西 (CLI)–CLI 经过指令行或终端运转。开发者经过 CLI 与 npm 打交道。
咱们平时用得最多得便O j o是指令行东西,(对,便是我在那篇文章中说的指令行)那么咱们先着手操练一下。
首先建个名为”npm-demo“h 4 M t P F + !的文件夹,运用编Y . & ^ Q V辑器打开,我用的是 vs code,如下图:
npm入门--web小学一年级基础课程
然后运用”Ctrl + `“键(ESC下边那个键)呼出编辑器内置的指令行终端。如下图:(没有用vscode的也没联系,确保能输入指令,且当时目录在nU @ G o % Ppm-demo下即可。)
npm入门--web小学一年级基础课程
9 E u r r C C指令行中输入第一个指令,也是最好记,最简单的一个:检查版别信息。
npm -v
输出成果是npm得版别号,我下载时的版别号是6.9.0
npm入门--web小学一年级基础课程

装置第一个包

先来一段废话哈。
我问过自e & t W z $己一个闷题,为什么游戏使人沉浸?由于好玩啊!
对,可是你说什么是好玩?
画面好嘛?是操作快捷嘛?
如同都不是,我玩c i K ( : . a # 1《大航海时代3》都上瘾,操作别扭,画面感人,可我便是喜爱它。
所以为什么?
由于游戏有正向鼓励,有即时反应,有当你达成某项方针时的成就感。
学习也是,学习需求即时反应,让你T 2 ( b # u g 成功的喜悦,哪怕仅仅小欢喜,小欢喜真是一部不错的电视剧呢。
下面这段,便是让你取得正向鼓励,取得即时反应,取得成就感的的操作。
废话end

开端鼓励方案

指令行的套路一般是这样3 – l J ; q的,某个程序5 u * ~ ` D-干什么-参数.(some bo{ K v D F 8 P hdy to do somethin7 ) ^ 1 ? Bg,初中~ x n ( 6 ^ 8 ? o我学英语记的最深刻的一句话…….)
能够运用下面的指令来装置一个包:
npm install <packag& h V U W 5e_name>
npm (npm这个程序) install(装置) <package_name>(包名参数)
理论学完来,来实操一下n } d x Q z ? l
有个包叫 “lodash”,你来运用指令行装置一下,别往下翻,直接在指令行里输入指令装置你看你会不会。(sb to do sth)
Lodash
是一个一致性、模块化、高性能的 JavaScript 实用= j R东西库。
官网地址:www.lodashjs.com/
指令如下:
npm i_ E ;nstall lodash
指令行输出如下:
npm入门--web小学一年级基础课程
(能够到输出中有许多 WARN 警告,可是程序员历来不在乎warning,只在乎error,不必管它们)
然后文件目录结构发生了改变,本来空无一物的npm-demo文件下多了一个叫node_m+ | /odules的文件夹,里边是方才装置的lodash包。还有一个叫package-lock.json的json文件。如下图:
npm入门--web小学一年级基础课程
或许你现已看到了lodash里: ? + Y 0 N $ & 包含的鳞次栉比的js文件了,也好V U &奇package-loc# ( g ` : ] ~k.json是用来干什么的,先不要管它们,后边会提到的,咱们继续– – / Y鼓励方案。
先来运用一下包,在npm-demo目录下新建一个名为index的js文件,在里边输入如下内容:
// index.js //此处的require是引证lodash包的意思
var lodash =require('lodash');
var outputv O N + H } =lodash.chunk([m | P'a', 'b', 'c', 'd'], 2);
console.log(output);// => [['a', 'b'], ['c', 'd']]
然后在指令行中输入:(nod j 7 @ P : G De xxxx.js 便是运转某JS文件,了解就好其他的先不要想,本文重点说的. [ 6 @ y G s A是npm。)
node index.js
输出成果如下:(我和你说过铲除指令A & e w 2 ,行的输出是 cls 回车吧?)
npm入门--web小学一年级基础课程
是不是很有成就感?!是不是正向鼓励?!你现在也能_ L M j ? 4够看着lodash的文档,自己写几个想测验的办法,用心感受一下~
给你十分钟休息时间~

新增的node_mQ ~ ) N G e +odules和package-lock.json必需求姓名!

刚说了,运转完npm install lodash指令,文件目录结构发生了改变,多了一个S M ? j q 4装着lodash包node_modules的文件夹,和一个, p ^ c – V ?叫package-lock.json的json文件7 E 0 h g G ( N V
–您的好友:“好奇心的处女座” 已上线。
它俩到] i q I ) L { P底是啥呢??有什么效果呢???
要想搞清楚它俩是啥,咱们要把时间c g 1 E倒回装置 “lodashg 8 C l m & M”npm package– % D ] 4前。(X ) ` P a f ( *鼓励方案完毕了哦~)
现在把整个npm-demo文件夹清空什么也不留!
现在把整个npm-demo文件夹清空什么也不留!
现在把整个npm-demo文件夹清空+ ^ @ S什么也不留!
打开指令行,输入如下指令:
npm init
会有如下输出:
npm入门--web小学一年级基础课程
指令行输出了一大段英文r s + # { * & Q I,翻译如下:
This utility wilg D t pl walk you through creating a package.json file
这个实用程序将引导您创立package.json文件。
It only covers the most common items, and tries to, : T E ^ E guess sensible defaults.
它只覆盖最常见的项目,并试图猜想合理的默– z V l B许值。
See `npm help json` for definitive documentation on th A @ l B rese fields and exactl; @ U – Ky what they do.
请参阅“npm-help-json”,以获取有关这些字段的最终文档以及它们的具体操作。
Use `npm install <pkg>` afterwards to install aM Q W & l p + 5 package and save it aE 0 $ x d ns a dependency in the package.json file.
6 5 4 R R y i 4后运用“np) Z 6 L ^ fm install<pkg>”装置包并将其作为依靠项保存在package.json文件中。
Press ^C at any time to quit. CTRLQ a } ? V d 1+C键退出
上面说了这H o K 3 x G F个是引导你创立package1 n E ] 2 B C b.json文件的,packa^ t ! N xge-lock.json还没又高铲] R r o k V 6除,怎样又来个package.json?
别急,搞清楚package.json的用处,自然就理解package-lock.json是干什么的了。

运用package.json

官网文档地址www.npmjs.cn/getting-sta…
到现在你肯R . d $ * ( i A =定知道npm(你配吗)是一个依据node.js的包办理器了,npm还没有智能到全主动办理b Q i ) K ] 4呢,所以它经过package.json办理本地装置的npm package。
package.json| # *文件效果:
  • 列出项目所依靠的包。
  • 项意图装备信息(比. j t方称号、版别、许可证等元数据)
  • 答应您运用语义版别操控规矩指定项目能够运用的包的版别。(语义版别:semver.org/lang/zh-! y T R v 5 zCN/)
  • 使您的构建可重现,因而更简单与其他开发人员同享。
当履行npm install指令时,npm会先从3 g ) 3 # % , package.json文件中读取一切dependencies信息,然后依据dependencies中的信息与node_modules中O H L ; M的模块进行对比,没有的直接下载,已有的检查更新。
创立package.json文件有两种办法:
第一种是上面提到的npm init指令,它会有一个指令行的引导程序,顺次输入如下图:
npm入门--web小学一年级基础课程
你现在得到了一个package.json文件内容和指令行中的预览一致:
npm入门--web小学一年级基础课程
第二种,输入如下指令,npm会直接创立一个默许的package.json.其内容与输入npm init指令然后一直回车到yes是一样的。(我截图是分开截的,或许有已输入的没有截: & X图)
npm init --yes #U 4 6 6 o或许 npz P W _ g zm} - : ? M i init --y
现在能够经过package.json办理依靠了,让咱们再次装置 lodash npm package,不过这回装置指令后边多一项参数 ”–saveu x / K P“,然后检查一下package.json有什么改变。
npm install lodash --save
然后咱们在装置一下jQuery,在装置命后边再加上另一项参数 ”–save-dev“,再调查有什么改变?
npm install jquery --save-dev
改变是package.json中dependencies下多了一个lodash,devDependencies多了一个jquery,如下图:
npm入门--web小学一年级基础课程
(形似到这儿咱们离package-lock.json渐行渐远了….)
所以这些改变,这些特点有什么用呢 1 + 7 l
效果是指定依靠联系!
要指定项目所依靠的包,您需求列出要在pp ~ Q ( 3 Q , k }ackage.json文件中运用的包。您h J 6 q能够列出两种类型的包:
  • “dependencies”:您的应用程序在出产中需求这些包。
  • “devDependencies”:这些包仅用于开发和测验。7 8 S x V # J u
–save和–save` . 5 q i-dev
向pack7 U U p s i rage.json中增加依靠项的办法是从指令行npm install履行此操作,运用–save或 –save-dev,具体取决于您期望如何运用该依靠项。
一个条目增加到您package.json的dependencies中:
npm in* k $ o rstall <package_name> --save
一个条目增加到您O 7 O Ppackage.json的devDependencies中:
npm install <package_name> --saz I # r I Vve-dev
(假如你的package.json目录中有N s d一个文件并且您运转npm install,则npm将检查该文件中列出的依靠项并运用语义版别操控下载2 A 3 O R ; W 最新版别。)

Package.j; i C o 0son 中的的字段特点

文档地址www.npmjs.cn/files/packa… 只节选9 ? _部分能够帮助你快速了解Package.json 特点字段。

dependencies

dependY 9 S kencies这个字段特点用于指定当时项意图依靠文件(npm package)。当npm install 项目e ! H ] a时由npm去下载这些依靠项。
在装置依靠项时运用 npm install <packageName> –save 指令去指定装置的包为出产环境依靠项。
• dependencies 的值是一个方针。
• depend+ 7 i o ^ {encies 用于装备模块依靠的模块列表。key是模块称号,value是版别Z @ R A C R &规模
• dependenR M Z x d 5 6cieB 2 s r 7 x As 是出产环境的依靠,不要把测验东西或transpilers写到dependencies中。
• dependencies 的版别规模有许多种写法。
有关指定版别规模信息:
  • version有必要version彻底匹配
  • >version 有必要大于 version
  • >=version 等等
  • <version
  • <=version
  • ~version疏忽中+ o _ ] H :版别,主动晋级小版别。
  • ^versi ; r I #on“兼容版别” 疏忽大版别z H ` M,主动晋级中,小版别。
  • 1.2.x 1.2.0,1.2.1等,但不是1.3.0
  • http://..(url) 能够指定tarball URL来替代版别规模,将在装置时下载j ) { % c A并装置在您的软件包本地。
  • * 匹配任何版别
  • “” (仅仅一个空字符串p 9 [)与…相同 *
  • version1 – version2与…相同>=version1/ a – ^ ^ N & v ] <=version2。
  • rangA k Z : | 3 Q ue1 || range2 假如满足ran4 F h O C : Oge1或range2则经过。
  • git… Git URL作为依靠项
  • path/path/path 标准化的本地相对路径

devDependencies

你自己用的,不打算未来打包到出产环境的依靠,都能够指定到此特点字段T / N `。指令:/ 7 P p D T npm install <packageName> –save-dev
• 用户下载装置你发布的模块,你的某些依靠不期望被引证。或许这些仅仅在你开发的时分给予你便利运用
• 在业务项目中,这部分内容只用于dev开发中,不在出产环境运用。
• 在部分的引证依靠需求Z N ^ c C S J运用npm link或许npm inR ] B { , %stall进行装置。

name

假如你的项目想要发布到npm网 C a j站里供大家install的话,则package.^ 1 f V { * V j /json中最重要的字段特点便是name和version,由于它们是必需的。
name和version一同构成一个假定彻底唯一的标识符。对程序包的更改应随更改版别一同供给。
假如你不打算发布包,则称号和r l U U Y 9版别字段是可– j u ! l 3选的。
起名的要1 0 F # .求:
  • 称号有必要小于或等于214个字符。这包含规模包的规模。
  • 称号不能以点或下划线最初。
  • 称号不能含有大写字母。
  • 该称号最终成为URL的一部分,指令e h q . R 0 x行上的参数和文件夹称号。因而,称号不能包含任何非URL安全字符。(汉字2 U * V就别想了)
官方主张:
  • 请勿运用与核心节点模块相同的1 @ ! % U I A 称号。
  • 不要在称号中加上“js”或“k u 6 / ( 0 node”。
  • 该称号或许作为参数传递给require(),因而它应该是简略的,但也是合理描绘的。
  • Y d E z ; X 2 E名的时分能够先检查www.npmjs.com/ 是否L Q ,有命名重复。

des : 4 { rcription

这个特点作为一个程序包的阐| q ;明运用,其值是一个字符串,用来描绘这个项目,假如包发布,则会显现在查找包的成果里b E l & [ W e
能够M g G测验经过 npm searc: C ~ M r 2 0h <packageName>查找npm package来看一下效果。

keywords

就和文章关键字一样,输入 npm searc: _ v wh lodash检查一下成果。

ho7 K T # Cmepage

项目主页的URL地址。@ I | L $ l $ a 字符串。

bugs

bugs是一个B l C M m ! k p方针,表明运用者遇到问题x ! & C h C时分及时获取帮助,有两个特点:
"bugs": {"! 4 D j o F y [url": "地址","emF + 1 Y }ail": "邮箱地址"F _ Z e }
假如只想供给一个地址URL,能够将“bugs”的值指c R V定为简单字符串而不是方针。能够是一个字符串。

license

包的许可证,这个是干嘛的谷歌吧,不赘述了。附上许可证列表:spdx.org/licenses/

author & contrib/ ^ k K t Z h _utors

作者和贡献者,单独开发者运用 autR – d ~hor, 一群人的共同开发请运用 c – ` QontribW : ~ 9 j k lutT W Oors 贡献者。有name, email, url 三个特点可选。
{   "name": "Barney Rubble",
"c $ V #  $ S cemail": "b] O V Q 9 h C i ]@rubble.com",
"url" : "http:S $ { _//barnyrubblei , 5 h 4 N }.tumblr.com/"
}
或许为单个字符串,n_ d N g B Vpm会解析的:
"Barney Rubble <b@rubble.com> (http://barnyrubx T . 9 . r W Rble.tumblr.com/)" 
电子邮件和网址都是可选的。

main

• main 字段的值是一个字符串
• main 的内容是L S f V s [ E [这个模块的主入口文件相对于package.json的文件路径。
• 当其他项目运用 import/require 等进行引进的时分,其实便是引证 main 的文件的 export 内容s M v
• 其实在main的对应文件中,你只需求供给导出的首要代码,不需求长篇大论的实现。

scripts

• scripts 是一个方针。
• scripts 用来编写模块中运用的脚本。
• npm 在一些阶段供给了对 scripts 的钩子,能够在其中运用。
特点介绍完毕了,太长了,就不一一列举了,在本文参考中列出完整的package.json的。说了一大堆,依然没有说咱们鼓励方案一开端的疑问,pm x E # ! 6 V 8ackage-lock.json是干什么的?
反而搞清楚了package.json的效果:(是啊,我又粘贴了一遍,最初介绍理论常识-中间举例阐明-结束再介绍理论常识,这个优点简单凑字数)
  • 2 6 f出项目所依靠的包。
  • 项意图装备信息(比方称号、版别、许可证等元数据)
  • 答应您运用语义版别操控规矩指定项目能够运用的包的版别。(语义~ 6 8 R ?版别:semver.org/lang/zh-CN/)
  • 使您的构建可重现,因而更简单与其他开发人员同享。

终于比及的package-lock.json

官方文档地址:www.npmjs.cn/files/packa…
paco m w )kage-lock.json是npm修改node_modules树或任何t v – z Y 2 {操作主动生成的package.json。它描绘了生成的切当树,以便后N # q q k c续装置能够生r h Q成相同的树,而不论中间依1 X W + x ? r &靠性更新。
package-lock.json文件确定一切q H B _ E t z * C模块的版别号,包含主模块和一切依靠子模块。o 6 0 9 #
由于npm在履行install指令时会依据package.json主动更新依靠包,所以正由于有了package-lock.Q W o ! Tjson文件Z + r #确定版别号,所以当你履行npm install的时分,npm不会主v ^ e k Q / M I动更新package.json文件中的模块。
确保能够装置彻底相同的依# l j Z ; n靠联系(否j 0 L a k % M v则都主H x 1 F i 2 6 l动更新了,和你一开端的依靠不一样了。2.0 和3.0有时分或许就不是一个库)。
要更新包的7 d n Z – B D N t话,有必要用npm inM n : ; 9stall packagename(主动更新小版别号)或许npm install packagename@x.x.x(指定版别号)来进行装置才会更新,p9 C @ z K # b S kacT % Ckage-lock.json文件中的版别号也会随着更新。

早就猜到H t D d 3 / p N %身份的node_modules

对,便是你想那个样子。嗯,没有错。别质疑自己,的确便是这个样子。

常识点总结

考试要考的重点哦:
  1. npx # P P M F Wm全称为Node Package Manager,是一个依据Node.js的包办理器,也是整个Node.js社区最流行、支撑的第三方模块最多的包办理器。由三c L M ] * .个独立的部分组成:
  • 网站 –是开发者查找包(package)、设置参数以及办理 npm 运用体会的首要途径。
  • 注册表 –是一个巨大的数据库,保存了每个包(package)的信息。
  • 指令行东西 (CLI)–CLI 经过指令行或终端运转。开发者经过 CLI 与 npm 打交道。
  1. npm经过package.json办理本地装置的npm package,其效果:
  • 列出项目所依靠的包。
  • 项意图装备d _ K E信息(比方称号、版别、许可证等元数据)
  • 答应您运用语义版别操M w b ? Z ~ } * c控规矩指定项目能够运用的包的版别。
  • 使您的构建可重现,因而更简单与其他开发人员同享。
  1. 创立package.json文件有两种办法:
  2. npm init 指令,它会有一个指令行的引导程序,引导你创立package.z L x Z z 5 q ojson。
  3. npm init –yeo | D Ms 或 npm init –y 指令,直接创立一个默许的package.json。
  1. pack[ Y P } _age.json增加依靠! ` q V 6项的办法是从指令行npm install履行此操Y X 1 2 E P作,运用–save或 –save-dev取决于:
  • “dependencies”:您的应用* ~ | A * 6 J l [程序在出产中需求这些包–npm install <package_na3 _ tme> –save
  • “devDependencies”:这些包仅用B 6 d g |j ! { y 9开发和测验–npm install <package_name> –save-dev
  1. package-lock.json确定一切模块的版别号,包含主模块和一切依, H q k +靠子模块,由于npm在履行install指令时会依据package.json主动更新依靠包确定版号之后,才不会主动更新,确保能够装置彻底相同的依靠联系。
  2. npm install <package_name> 装置某个包的指令
  3. npm uninstal% f r = L ?l <package_name> 卸载某个包的指令

喜闻乐见的问答环I M a Y t Z K d

常识点没了吗?

仅仅列出本文的常识点,其余文中没有的常识点3 P y没有列出,由于是web小学一年级根底课程,太杂乱的我觉得对新人不友好。
可是我也信任经过本文也能让你有对npm有个清晰的认识了。^ J | | w ?

我也不能一直在node里运p z y转引进的包吧?

我在学习的时分也在想,我不能只在node环境下 node 某js吧?我要写项意图啊,我要把经过npR R 3 W 2 ym装置的包引进到web项目里运用啊。
这个当k V T B然没有问题,是能够的,正常写相对路径就能从node_modules里1 | 9 _ $ h G g引进就能够的。
你平时怎样引进,现在就怎样引进即可。(便是麻烦点)

这就没了?感觉npm没有幻想的巨大上呢?

你喜爱的人s a ? c A k g , 5也是俗人 是6 U & d你的喜爱为她镀上金身
实质便是办理依靠包,学习完了你会觉得它真的没有你想想的那么巨大上呢~

还有什么问q e k R H题?

我学npm前的疑问了,我大部分现已忘了。能想起来的C G p %我写了。

结语

写完了,说下感触,便是有时分心里理解,可是组织语言% ^ 0 6很困难,为了不误导新人,我又翻文h W 档,又看同僚文章的,生怕哪里写错了挨喷,超级累,优点仍是有的,便是我的确发现了我i O N * Z ] U B一开端的理解的确Z e [ 5 N &G u r w N K z B )误差,又加深了一遍理论学习~又提高了。
好了,再回忆一下我最初说的方针和意图吧~ H G } 2 5
写作意图如下:
  • 为今N 9 0 / J @ C .后写其他文章,笔记,g ! Z I d % 供给独立的辅佐阐明(√)
  • 回忆总结已知常识点(√)
写作方针如下:
  • 通俗易懂的由浅入深的解说npm(√)
  • 内容要生动风趣!()
  • 内容要生动风趣!()
  • 内容要生动风趣!()
辅佐阐明达成了,不仅8 a Y d g f ^ b B回忆总结常识点了,还又学习了一番~
方针嘛{ y r y % 5~通俗易懂我感觉是达到了,由浅入深嘛~如同就没有啥深的….都是浅的,并且我又自始至终看了一遍,一点都不生动,还不风趣,失利~或许我就不是个风趣的人吧~
就酱吧
love&peace
-end-
本文参考资料:
npm 中文文档–官方的,才是威望的,准确的,也是初学者看的最懵逼的
《package.json 中你需求了解的都在这》–package.json特点部分的能够看这儿,描绘清晰。中文的
npm 模块装置机V S # f 4制简介–阮一峰
Lodash 中文文档 –嗯,文档
你想知道关于package-lock.json的一切,可是太害怕了问了?–简单明了,没有我这 废话这么多
关于package.json和packad T g H v [ $ qge-lock.json的差异–Q F 6 U g – 9这俩傻傻分不清楚的能够再看0 $ k S d