亲宝软件园·资讯

展开

npm详解

springsnow 人气:1

一、由来

前端是怎么共享代码的呢?

1、在 GitHub 还没有兴起的年代,前端是通过网址来共享代码

比如你想使用 jQuery,那么你点击 jQuery 网站上提供的链接就可以下载 jQuery,放到自己的网站上使用

2、GItHub 兴起之后,社区中也有人使用 GitHub 的下载功能:

3、麻烦

当一个网站依赖的代码越来越多,程序员发现这是一件很麻烦的事情:

有些程序员就受不鸟了,一个拥有三大美德的程序员 Isaac Z. Schlueter (以下简称 Isaaz)给出一个解决方案:用一个工具把这些代码集中到一起来管理吧!

这个工具就是他用 JavaScript (运行在 Node.js 上)写的 npm,全称是 Node Package Manager

4、具体步骤

NPM 的思路大概是这样的:

1. 买个服务器作为代码仓库(registry),在里面放所有需要被共享的代码

2. 发邮件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把代码提交到 registry 上,分别取名 jquery、bootstrap 和 underscore(注意大小写)

3. 社区里的其他人如果想使用这些代码,就把 jquery、bootstrap 和 underscore 写到 package.json 里,然后运行 npm install ,npm 就会帮他们下载代码

4. 下载完的代码出现在 node_modules 目录里,可以随意使用了。

这些可以被使用的代码被叫做「包」(package),这就是 NPM 名字的由来:Node Package(包) Manager(管理器)。

5、发展

Isaaz 通知 jQuery 作者 John Resig,他会答应吗?这事儿不一定啊,对不对。

只有社区里的人都觉得 「npm 是个宝」的时候,John Resig 才会考虑使用 npm。

那么 npm 是怎么火的呢?

npm 的发展是跟 Node.js 的发展相辅相成的。

Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js,但是 Node.js 缺少一个包管理器,于是他和 npm 的作者一拍即合、抱团取暖,最终 Node.js 内置了 npm。

后来的事情大家都知道,Node.js 火了。

随着 Node.js 的火爆,大家开始用 npm 来共享 JS 代码了,于是 jQuery 作者也将 jQuery 发布到 npm 了。

所以现在,你可以使用 npm install jquery 来下载 jQuery 代码。

现在用 npm 来分享代码已经成了前端的标配。

二、npm安装

以安装Vue项目为例,在使用之前,我们先来掌握3个东西是用来干什么的。

1、下载nodejs

windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮。

如图,下载12.18.0 LTS (推荐给绝大部分用户使用)直接点击就会自动下载了。

下载后双击安装

可以使用默认路径。

注意,如下图所示,在安装node.js时,将一起自动安装npm包管理器,同时将两者自动添加到系统的环境变量。

一路点Next,最后点Finish完成

2、检查安装目录,检查文件系统是否正常。

是否在安装目录下存在node.exe、npm.cmd文件和node_modules目录等。

3、打开CMD,检查是否正常

查看node.js和npm的环境变量是否增加

echo %Path%

通过命令查看node.js和随着它一起安装的npm模块的版本号。

node –v
# v12.18.0

npm –v
# 6.14.4

4、查看npm的本地全局仓库

npm list -global

注意:npm的本地全局仓库在C系统盘的用户目录。即C:\Users\bobin.yang\AppData\Roaming\npm。

5、配置镜像站

npm config set registry=http://registry.npm.taobao.org

6、 显示所有配置信息

npm config list

我们关注一个用户配置文件.npmrc,可以看到刚才的配置信息

7、检查一下镜像站行不行

命令1

npm config get registry

命令2

npm info vue # 看看能否获得vue的信息

8、升级npm为最新版本

npm install ***为安装或更新命令 加上-g这个参数的意思是装到global目录下即C:\Users\bobin.yang\AppData\Roaming\npm,否则为安装到当前目录下。

单独更新npm :

npm install npm -g

再次查看npm的版本:

npm -v

再次查看global里的模块,现在不为空了,已经读了NPM模块了。

npm list -global

三、NPM 用法

1、包安装方式

本地模式和全局模式的特点如下:

2、常用命令

NPM提供了很多命令,例如install和publish,使用 npm help 可查看所有命令。

3、使用 package.json

当你的项目需要依赖多个包时,推荐使用 package.json。其优点为:

创建package.json文件

4、更改全局安装目录

使用npm config命令可以达到此目的。

npm config set prefix <目录>

或者手动在 ~/.npmrc文件中进行配置:

prefix = /home/yourUsername/npm

更改目录后记得在系统环境变量 PATH中添加该路径:

export PATH=~/npm/bin:$PATH

5、安装时保存到依赖项

npm install默认将所有指定的软件包保存到依赖项中。此外,您可以使用一些标志来控制在何处以及如何保存它们:

四、安装CNPM

npmmirror 中国镜像站

$ npm install -g cnpm --registry=https://registry.npmmirror.com

五、关于npm run

1、npm run XXX是执行配置在package.json中的scripts 配置的 value。

"scripts": { 
"serve": "vue-cli-service serve", 
"build": "vue-cli-service build", 
"lint": "vue-cli-service lint" 
},

npm run serve 实际运行的是 vue-cli-service serve

2、比如: 
只有在package.json中的脚本配置了,你才能run,所以不是所有的项目都能npm run dev/build。 
要了解这些命令做了什么,就要去scripts中看具体执行的是什么代码。 
这里就像是一些命令的快捷方式,免去每次都要输入很长的的命令(比如unit那行)。

3、dev和serve的区别

4、查看当前项目的所有 npm 脚本命令 
其实也可以在package.json的看scripts对象里有什么属性

npm run

5、dev,build等没有强制含义,我们在通常情况下:

如果对npm run这一些列脚本命令有疑惑,可以看npm-hooks

六、npm与Yarn

Yarn发布于2016年10月。

1、安装yarn

npm install -g yarn

2、yarn和npm命令对比:

npm install : yarn 
npm install react : yarn add react 
npm uninstall react : yarn remove react 
npm install react --save-dev : yarn add react --dev 
npm update : yarn upgrade 
npm run build : yarn run build

3、yarn的优点:

到此这篇关于npm安装与使用的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论