前言npm是一个强大的前端工具，一定要好好掌握。在平时的开发中，用的最多的应该是npminstall。不过，这么强大的工具，功能肯定不止于此。现在整理一下我所知道的关于npm的知识，大部分都是在日常生活中用的比较多的。整合不仅方便查找，更重要的是，作为社会主义接班人，少先队员应具备的优良品质时刻提醒着我要为社会做出应有的贡献。写到这里，我不禁低头看了看，胸前的红领巾似乎更红了，孙爷爷似乎也在微笑着对我点头。在开始之前我再说一遍，合集会持续更新，因为知识一直在增加。但是不会经常更新。一般会不断保存和上传。建议加入书签。文章会放在我的博客文集中，博客还是会更新的很快。多说一句，windows同学可以试试windows命令行神器cmder，在使用windows原生命令行的时候可以减少很多奇怪的错误。命令集强烈建议不要使用cnpm，会出现各种奇怪的bug。与cnpm相比，为npm设置registry是一个不错的选择，而使用nrm是更好的选择。npminit创建基本的package.json#会使用命令行交互完成npminit的创建#直接跳过交互模式，使用defaultValue创建package.jsonnpminit-ynpmpublishpublishnpmpackage这里只列出发布步骤，具体怎么写npm包可以在网上搜索相关内容。各路大佬已经整理了很多，本课博主就不玩花样了。需要注意的是，我们需要先将注册中心切换到npm初始源，而不是使用淘宝，淘宝是已经同步了npm包的国区资源，实际资源还是来自npm，所以我们需要发布先到npm，然后等待淘宝自动同步（顺便刷一波下载）。#将registry切换到npmnrmusenpm#第一次使用npmpublish#如果是第一次使用npmpublish，需要添加一个账号npmadduser#不是第一次使用npmpublish#登录你的账号，这一步其实是不需要的，看看whoami就知道了。npmlogin#查看当前账号npmwhoami#发布npmpublishnpmview查看某个库的详细信息。这对于标记库来说非常方便。您可以检查相应的标签名称。如果需要安装特定的标签库，可以使用npminstall${packageName}@${tag}npmview@vue/cli#查看视图后，安装指定的标签npminstall-D@vue/cli@nextnpmroot获取当前项目的node_modules路径。你可以在命令行类库中使用，它会查找node_modules的路径并返回绝对路径。但是也有bug，如果你在一个空文件夹下使用npmroot，它会直接返回当前路径加上node_modules，即使你的目录下没有node_modules文件夹。比如npmroot，如果需要在很深的路径下使用当前项目所依赖的node_modules/.bin中的指令，我们有两种方法可以找到该目录constmoduleRootPath=path.join(process.cwd(),"node_modules");constmoduleRootPath=execa.sync("npm",["root"]);npmlist查看全局安装的模块npmlist-g--depth=0npmcache清除npm缓存并报错npmresourcebusyorlocked，或者报其他莫名其妙的错误时，可以试试。#forcetable强制清除缓存npmcacheclean--forcenpmversion快速更改项目版本如何正确修改项目的版本号？人工修改是不是有点低？下面教大家如何正确修改版本号。上面我们提到了npm的版本规则。这里又提到了major.minor.patch-pre。最后有一个额外的pre。我们将其视为临时版本。上面没有提到，因为临时版本很少用到。#获取当前项目的依赖版本npmversion#修改当前项目版本为1.1.5npmversion1.1.5如下正确修改版本。需要注意的是，npmversionprerelease是修改和递增临时版本的指令。#升级主版本1.1.5->2.0.0npm版本major#升级小版本1.1.5->1.2.0npm版本minor#升级补丁版本1.1.5->1.1.6npm版本patch#升级中间版本1.1ofthemajorversion.5->2.0.0-0npmversionpremajor#升级时间的过渡版本1.1.5->1.2.0-0npmversionpreminor#升级补丁版本的过渡版本1.1.5->1.1.6-0npmversionprepatch#你认为你可以通过重新执行npmversionpre*来增加临时版本号？#不，所有pre*interim版本都通过以下命令npmversionprerelease递增。Yarn也可以使用命令改变版本，但是需要使用yarnversion--new-versionpatch。节点运行时内存溢出在运行内存比较小的电脑上，可能会遇到内存溢出导致程序被kill的场景。使用--max-old-space-size可以解决这个问题。{"scripts":{"start":"node--max-old-space-size=4076index.js"}}当然，如果package.json中scripts中的命令比较多的话，需要加上这个说明，这个问题已经在issue中提到了，也许node之后的版本会解决这个问题。在npmrc中添加max-old-space-size另外，我们不仅可以在脚本中添加，也可以在执行命令中添加，如下，一个命令行类库bin目录下的执行文件。#!/usr/bin/envnode--max-old-space-size=4096constcli=require("../src").default;cli.run();npmscope@是什么？安装依赖时，发现依赖有一个前缀@?这是npm的作用域机制，可以理解为一个组织，比如@types/node，@vue/cli，前面的@就是一个组织，只有包管理器才能将包上传到对应的作用域。如果你想发布@types/hello它不会工作，因为你没有@types权限。那么如何发布带有@前缀的项目呢？必须先在npm管理界面申请对应的@${scope}，如下图。npm版本号说明首先说一下常识。npm的版本号规则是major.minor.patch，分别代表主版本、次版本、补丁版本。在发布时，我们需要遵循以下原则。如果它只是一个错误修复，然后更新补丁。如果添加了新功能，但向后兼容，请更新minor。如果有重大变化并且向后不兼容，则需要更新专业。一看就知道是什么意思的就不在这里说了，比如1.1.0,>1.1.0,>=1.1.0,<1.1.0,<=1.1.0,1.1.x,1.1.*，让我们谈谈一些特别的事情。~1.1.0~1.1.0可以匹配到1.1.n~1.1可以匹配到1.1.n~1可以匹配到1.n.n^1.1.0从版本号最左边的非零数字开始，正确的数字可以是任意的。^1.1.0可以匹配到1.n.n^0.1.0可以匹配到0.1.nlatestlatest是一个特殊的版本号，我们上面提到了npmview，你可以试试npmview@vue/cli，可以看到dist里面有两个标签，最新和下一个。如果我们在发布包的时候没有指定标签，默认发布的是latest。并且，如果我们将依赖版本设置为latest，则意味着我们每次都会安装最新版本的laetst。但是接下来是怎么发生的呢？我们可以在npmpublish的时候运行npmpublish--tag，这样发布的项目就会多一个tag。安装时，除非指定npminstall@vue/cli@next，否则不会走到这个标签。npmscriptshookscripthooknpmhook可以简单分为pre和post两种，pre表示在命令之前执行，post表示在命令之后执行。npm内置了几个命令，分别是：start、stop、test、restart、version、install、publish。内置命令是什么意思？即可以直接通过npmstart来执行，而不是npmrunstart。Start,stop,test,restart,version先说这几个命令，因为这几个命令都差不多，在前面加个pre或者post就可以了，你可以把下面的命令复制到你的package.json里面，然后运行对应的npmstart、npmtest、npmstop等，试试看。需要注意的是，npmversion和npmrunversion是不同的。前面我们提到过，npmversion可以设置版本，而npmrunversion只是一个简单的运行命令。{“prestart”：“echoprestart”，“start”：“echostart”，“poststart”：“echopoststart”，“prestop”：“echoprestop”，“stop”：“echostop”，“poststop”：“echopoststop”，“pretest”：“echopretest”，“test”：“echotest”，“posttest”：“echoposttest”，“prerestart”：“echoprerestart”，“restart”：“echorestart”，"postrestart":"echopostrestart","preversion":"echopreversion","version":"echoversion","postversion":"echopostversion"}上面的脑子想想就够了，还有这里有些特殊的指令可以自定义，可以加上前后前缀。当然这里不能使用npmhello来运行，而是使用npmrunhello。{"prehello":"echoprehello","hello":"echohello","posthello":"echoposthello"}install,publish比较特殊的两个指令，npminstall和npmpublish，这两个除了有pre和post前缀,和几个隐藏的钩子。先说npminstall。下面可以看到，除了preinstall和postinstall之外，还执行了prepublish和prepare，不过这里只给出hook，实际应用场景打出来。{"preinstall":"echopreinstall","install":"echoinstall","postinstall":"echopostinstall","prepublish":"echoprepublish","prepare":"echoprepare"}再看看npm发布挂钩更有用。比如prepublishOnly，这个hook可以在项目打包或者编译等发布之前执行，防止忘记编译直接发布。另外，发布成功后也可以通过postpublish将包信息上传到数据库。{"prepublish":"echoprepublish","prepare":"echoprepare","prepublishOnly":"echoprepublishOnly","prepack":"echoprepack","postpack":"echopostpack",//发布成功"postpublish"后面会执行："echopostpublish"}npmscripts&,&&,|,||先区分一下，&&和||是一个组，属于逻辑标识符，而|和&是另一组是的，它是linux的一个功能。|&这里，前端同学可能先看不懂，|是一个pipeline，一个&表示把命令放到后台工作。#|pipeline#获取test.txt的文件内容#将内容传给less方便浏览#less是linux命令，可以随意浏览文件cattest.txt|less下命令前端同学可能看不懂，服务端的同学应该懂点吧。比如npmrunstart，服务启动后，直接挂在终端前台。挂在前台是什么意思？服务启动后，我们可以尝试输入lsl或者其他命令，可以发现控制台没有任何输出。但是如果你运行npmrunstart&，以&结尾，该服务将在后台启动。这时候如果输入ls或者其他命令，就可以在控制台看到输出。不用管前面的输出，那是vue-cli-service的输出，直接输出到屏幕上。说到这里，我们来说说几个比较常用的linux命令。#后台挂掉服务npmrunservice#查看后台挂起的服务#会返回一个有id的服务，如下#[1]+1967runningnpmrunservicejobs-l#kill后台运行的服务kill1967有兴趣的同学可以了解一下下面的linux指令。#把后台运行或者挂起的服务切换到前台运行fg#后台运行挂起的服务bg#同样把后台挂起的服务运行#也可以通过jobs查询，用kill停止#但是的log是查询不到的#所以一般在node中，我们使用pm2来挂起任务nohupnpmrunservice&当然这个命令除了启动服务挂在后台还有其他用处，比如你需要启动的不是一个服务，但只想运行命令，npmrunscript1&npmrunscript2&，这两个命令会同步运行，因为它们都是挂在后台运行的。||&&这两个是我们比较熟悉的逻辑运算符，||表示如果前面的运行错误，比如process.exit(1);代码中，会执行下一个，&&表示前一个会执行成功。#执行测试，如果抛出错误，lognpmruntest||npmrunloginfo#执行install，然后执行startnpmruninstall&&npmrunstartnpx是什么？我也想使用我自己的库来找出npx是什么。npx可以理解为语法糖，背后的逻辑是一样的。通常有两种主要用法。在项目中使用package.json假设项目中的package.json如下，当要执行tsc时，需要在脚本中写./node_modules/.bin/tsc--project./。{"scripts":{"build:ts":"./node_modules/.bin/tsc--project./"},"devDependencies":{"typescript":"^3.7.4"}}但是使用npx是可行的省略node_modules/.bin/中的一长串内容，如下。{"scripts":{"build:ts":"npxtsc--project./"},"devDependencies":{"typescript":"^3.7.4"}}保证执行最新的脚本代码创建项目npx，npm会下载库存放临时文件，执行后删除，可以保证每次运行都是最新的代码。npxcreate-react-appmy-react-app，是不是很眼熟？我们想用npx运行自己的库也很简单，只需要在package.json中配置如下{"name":"@scope/my-cli","bin":{//不需要，这里是library原来的用法"my-cli":"bin/index.js",//这里是npx实际运行的代码//我们只需要保持key和packpage.name相同即可"@scope/my-cli":"bin/index.js"}}然后，发布你的库，然后使用npx@scope/my-clihello，相当于全局安装@scope/my-cli，然后执行my-clihello。删除全局安装的所有模块谨慎使用，除非您知道自己在做什么，否则不要使用。rm-rf/usr/local/lib/node_modules好的库推荐排名不分先后，会按照博主记忆的顺序记录。其中包括命令行工具，以及对有用的第三方库的推荐。大概率不会有三大主流框架的第三方库（你肯定比我了解的多），node库为主。纱线依赖处理工具就是这么好用。我不想说太多。大多数人应该使用它。和npm相比，可以更好的处理项目依赖（不过我也发现npm可以安装成功，但是yarn安装会报错）。甩掉命令，一个字就是赶。npminstallyarn-g#安装devdep依赖yarnadd-D@types/node#安装dep依赖yarnaddaxios#安装peerDep依赖#peerDep依赖means，如果你安装我，你还必须安装XXXyarnadd-Pvue#全局安装依赖yarnglobaladd@vue/climirror-config-china自动配置国区镜像下载某些库时，发现即使配置了registry，下载还是异常缓慢，甚至半小时天不动？你可能需要这个。本库会自动配置很多第三方库（如electron）的地址在国家地区做镜像。虽然需要的时候也可以手动配置，但是如果有一键操作，还需要什么自行车啊！下载速度嗖嗖嗖嗖。npminstall-gmirror-config-chinanrm管理registry当你经常需要切换registry源时（比如你需要npmpublish代码，需要切换到npm启动源），这个工具可以帮上忙。npminstall-gnrm#添加npm注册中心到nrmnrmaddnpmhttp://registry.npmjs.org#添加淘宝注册中心到nrmnrmaddtaobaohttps://registry.npm.taobao.org#使用淘宝的注册中心nrmusetaobao#使用npm的registrynrm使用npmhttp-server来快速启动静态服务。在本地启动静态服务非常方便。当然，还有很多参数。我不会在这里做更多的演示。http-servernpminstall-ghttp-server举个小例子，当你兴高采烈的开发一个项目打包到dist，想看看效果如何，你可以进入dist文件夹，启动http-server服务，它会default启动以index.html为入口的静态服务，同时监控文件变化。虽然cddisthttp-servernvm管理多个版本的node，虽然可能很少见，但你还是会遇到在同一台电脑上运行不同版本的node的问题。这个库可以解决它。nvm#查看当前使用的节点版本nvmcurrent#安装节点指定版本nvminstall12.14.0#切换节点版本nvmuse12.14.0#使用12.14.0版本的节点运行index.jsnvmrun12.14.0index.js后记最近脱发率跟瑞幸咖啡差不多，健忘越来越大。写代码的时候经常会忘记刚才要干什么。我以前能把东西放四五个小时。专注力，现在很容易走神，心想，啊，我老了，以前从来没有过对年龄的恐慌，但看着公司里优秀的新生代，心里不免有些忐忑。怎能不着急？不是废寝忘食的工作，而是让自己成为一个无可替代的人。感情和工作也是如此。这不是一个热门话题。关于司徒正妹的消息，想必大家都已经知道了。可惜，说是天才陨落也不为过。因此，在平时的开发学习中，大家除了要注意技术细节外，更要注意自己的身体。赚钱的机会很多，但唯有健康的身体才能支撑起伟大的理想。ps1：写完之后发现自己了解的不多，写的还挺复杂的。如果你们有私货，可以偷偷分享给我。我考虑一下再补充，螃蟹。ps2：我有点头条党。发现写得好的文章阅读量不如面试文章（指一些），感觉不平衡。如果你什么都知道，请进群，来群里嘲讽我。页脚代码就是生命，我喜欢它。技术日新月异，脑子永远在线，前端长。我们将在下一期在这里见到我。gayhub@jsjzh欢迎大家来和我一起玩。欢迎小伙伴直接加我，拉你进群一起学习前端，看我文章的地方记得备注哦~
