NPM的使用


NPM是什么

请思考一个问题,当我们有大量的重复需求需要解决的时候,常常会使用相同的技术,那么我们如何来分享这些技术呢?在前端领域,最简单的方法就是互相分享编写好的js代码,里面有大量的函数便于我们调用,我们把这种具有解决某些特定问题的能重复使用的JS代码叫做模块

包(package)其实就是一些JS模块组织到一起,放到一个目录里。

npm就是一个包管理器,npm把大量的包托管在它的平台上,便于开发者上传、下载、修改、更新包。

总之现在的前端开发,已经不需要你重复地造轮子,去实现那些重复的功能,你只需要利用好npm,下载具有相应功能的包,并使用他们,你也可以编写一些自己的npm包,分享给他人使用,npm的包之繁多,超乎你的想象。

NPM官网

https://www.npmjs.com/

在npm的官网,你就能直接搜索你想了解的包,点进去可以查看相应包的安装和简单的使用方法,以及该包的Github地址和作者信息等等

注意: 包与包之间可以是互相依赖的,一个包可能依赖于其他很多个包,并不是说每个包都是单独的,理解这个概念很重要,因为当我们在开发一个webApp的时候,也可能同时依赖于很多的包

更新NPM

虽然Node.js的较新版本会帮你安装好npm,但是npm自身的更新要比Node.js更加频繁,我们当然想保证自己电脑上的npm处于一个最新版本。运行以下命令来更新:

npm install npm@latest -g

利用NPM来安装模块

注意:当我们谈论到安装的时候,有两种方式,一种是全局安装,一种是本地安装

如果你在开发的过程中经常需要安装一些模块,并且通过Node.js的require命令或者es6的import命令来使用,那么我推荐你本地安装

如果你需要经常要在命令行里面使用这个模块,或者说把他们当做一个命令行工具,那么我推荐你全局安装

NPM常用命令

全局安装

当你执行全局安装命令的时候,无论你的命令行当前目录是在哪儿,效果都是一样的:

npm install < 包名 > -g

-g 也可以写作 --global

本地安装

本地安装的时候,请务必先利用cd命令进入到要安装的目录下,而不要直接运行

npm install < 包名 > ,首先这是个不好的习惯,其次直接运行这个命令npm会把包

安装在他的本地默认模块文件夹下,有时候会和你其他的本地目录的模块发生冲突

在Mac OS,本地安装会默认安装在 /user/你的用户名/node_modules 文件夹下
如果你已经这么做了,那么把本地默认安装的文件夹删除即可

示例:

首先我先进入到我的桌面目录下:

然后创建一个项目文件夹,使用mkdir命令,后面跟文件夹的名字:

mkdir my-project

如果你不想用命令来生成文件夹的话,那么有一个办法就是,先在创建好你的文件夹(在任何目录都可以),然后再命令行中输入cd(记得加一个空格)然后把创建好的文件夹拖入命令行中,命令行会帮你自动生成好路径

然后会看到

这时候按下回车就可以了,就能进到项目文件夹中

接着我们来本地安装一个包,比如 axios

npm install axios

这时候 npm 就会开始安装,你应该能看到安装时的进度条,安装成功会显示:

你会清楚的看到 axios 这个模块的目录结构,以及它和它所依赖的模块的版本号

注意: npm 显示了一个警告,提示我们在当前目录下没有package.json这个文件
不要着急,之后我们会单独来讨论package.json的使用

打开你的项目文件夹,你应该可以看到一个node_modules文件夹,里面存放着所有你本地安装的模块

因为 axios 依赖于另外三个模块,所以 npm 也会把它安装进来

使用模块:

这时候我们来随便写一个脚本文件来测试一下我们的模块是否可以正常使用

项目文件夹根目录下新建一个 index.js 文件,输入以下代码:

let axios = require("axios")

axios.get("https://api.douban.com/v2/movie/coming_soon?count=5")
    .then(function (response) {
        console.log("最近5部要上映的电影的名字:")
        for (let subject of response.data.subjects) {
            console.log(subject.title)
        }
    })

然后在命令行输入 node index.js 在node中运行脚本,我们来看看运行结果:

我们成功利用下载好的 axios 模块请求到了豆瓣网最近要上映的5个电影的信息,用循环打印出来

常用命令

包和模块是一个意思,[]内命令的代表修饰符

  • npm ls 列出当前目录安装的模块 [-g]查看全局
  • npm uninstall < 包名 > 删除模块 [-g] 删除全局模块
  • npm update < 包名 > 更新模块 [-g]
  • npm -l 查看npm各个命令的简单用法
  • npm init 初始化并创建 package.json [--y]使用默认参数
  • npm outdated 检查模块是否过期 [-g]检查全局模块

更多命令请查看 https://docs.npmjs.com/all