来自新手的npm命令使用小总结

1,967 阅读6分钟
   


本人作为前端新手小白,在刚使用VScode编译器时便感叹十分便利,与在校时老师推荐的DW方便不知多少,轻量级的基础下还具有丰富的插件安装选择,无比的便利。但是在新接触这些新知识时,首先就在安装这些新插件的路上碰了壁,因此在此总结一些本人所学习到的命令与所遇到的问题与大家分享。 


 第一步

 想要进行接下来的操作首先我们需要安装无比好用的VSCode

传送门:code.visualstudio.com/


 在完成了VSCode的安装之后,如果对英语界面看不习惯的小伙伴可以安装中文插件,此时,VSCode强大的功能就体现出来了——插件商城:



在插件商城搜索Chinese即可搜索到中文版,由于本人已安装简体版,所以搜索中未出现,但是如果没有安装中文版的同学选择安装简体版即可。


第二步 安装Node.js

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。


Node.js安装传送门:nodejs.org/en/


安装完成Node.js之后,需要对其进行配置,对此赘述太多大家肯定嫌我啰嗦,所以我们继续

Node.js传送门安装步骤:www.runoob.com/nodejs/node…


在完成了以上步骤之后,我们就可以来开始我们今天的主题了——使用npm命令


当我们在编辑完成一个JS文件之后,我们想要在VScode之中运行它,我们当然可以选择直接运行它,当时由于今天谈的是npm命令,所以我们还是继续按照主题走下去。

当完成一个JS文件之后,想要运行它,找到该文件,右键点击它,会出现下面这个画面:


选择打开终端,我们就正式开始了今天的主题


1.node -v


来到这一步,我们的电脑应该都安装好了Node.js并且而配置好了环境。因此在终端部分输入该命令即可查看版本号,可以知道是否成功安装Node。



2.node .\1.js

以下图为例,在终端输入该命令按下回车之后即可运行该文件


注:在输入完node之后,直接按下Tab键可以直接跳出文件名,减少了输入时间。


3.npm -v


此命令同样是查看是否安装了npm,查看版本号。npm属于node.js中的包管理器,在安装了node.js时已经安装。


4.npm install 或npm i


如果没有安装npm,则可以输入该命令进行安装。


5.npm config set registry https://registry.npm.taobao.org

 

由于npm安装是外网,所以很多人安装速度会很慢,因此在终端输入该命令可以使大家的下载速度大大加快。



6.live-server

在终端输入该命令可以实现在编辑html文件时不再需要不断地刷新网页才能看到新的变化,可以根据你的代码实时更新内容。

许多人在输入这个命令时会遇到下面这个问题


如果遇到了这个问题,先不用慌,我们有两种解决方法:


第一种:插件商城下载插件

如果使用npm命令无法安装live-server,可以直接在插件商城搜索live-server进行安装,安装完成之后,直接在找到想要打开的文件,点击右键即可通过live-server打开文件



第二种: windows powershell

第一步:打开电脑开始界面,找到windows poweshell,右键点击,以管理员身份运行



第二步:输入set-ExecutionPolicy RemoteSigned命令,确定后输入yes之后退出powershell,然后再次来到VScode终端输入liver-server即可正常安装。


7.npm init -y

该命令可以初始化一个node文件,在行使完该命令之后,文件夹里会自动生成一个package.json项目描述文件。


8.npm init

将刚刚通过npm init -y生成的json文件删除,再于终端之中运行该命令,可以开始对新建的json文件在终端之中进行描述。

9.npm -g stylus

在执行该命令之后,有可能会出现像刚刚安装live-server一样的错误,解决方法参照powershell方法解决。在安装完成之后,文件夹中会出现一个带有styl后缀的新文件,有了这个文件,我们以后编写CSS代码时便可以缩短许多时间,提高写代码的效率。


10.stylus -w .\index.styl -o

在完成npm i -g stylus命令的安装之后,再输入stylus -w .\index.styl -o命令,则可以开始对styl文件开始监听,实时生成新的CSS文件,为写CSS代码提供了极大的便利


11.npm  i -g  nodemon

相信很多小伙伴在设计算法时要是循环数太大最后运行计算出来速度特别慢而且还会报错内存溢出,而且在更改数值的时候需要多次更改,十分不便,因此这个插件安装可以给我们运行代码代来极大的便利。


12.nodemon .\index.js

在终端中运行这个命令则可以在运行JS文件中的算法类型题目时减少繁琐的步骤,给予我们极大的便利。


13.npm i -g typescript

javascript作为一门弱类型语言,许多结构上还是有缺陷的,typescript 是 js的超集,可以将js由弱类型转为强类型,因此以上命令在终端运行之后,我们就可以开始typescript的编写了,不但提升了代码的可读性与优美性,同时还极大的优化了代码运行效率。

14.tsc  index.ts

在生成了typescript文件之后,在终端输入该命令之后,则会自动在文件夹之中生成一个JS文件,当我们在typescript文件中使用极简代码编写时,会在相应的JS文件中同时生成代码,极大的减短了我们的编写代码时间,同时让我们的代码变得更优美。


总结

以上一些知识都是本人学习前端开发时的一些小经验,希望可以帮到和我一样的新手们,如果有不足的地方也欢迎各位大佬指正。