npm模块安装机制简介及发包流程

一、npm是什么？

npm 是 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码，管理项目依赖关系。

NPM 的思路大概是这样的：

⒈ 买个服务器作为代码仓库（registry），在里面放所有可以被共享的代码

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

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

⒋下载完的代码出现在 node_modules 目录里，就可以在项目中随意使用了。这些可以被使用的代码被叫做「包」（package），这就是 NPM 名字的由来：Node Package(包) Manager(管理器)。

二、安装Node.js和NPM

【1】安装node和npm

npm是用node.js编写的，因此您需要安装node.js才能使用npm。

在node.js官网下载安装包，傻瓜式安装。

安装node.js后，就已经自带npm（包管理工具），不需要另外再进行安装npm了。

终端输入命令检查是否安装成功，如果输出版本号，说明我们安装node环境成功

image

【2】安装npm

// 安装指定版本
npm install npm @版本号

// 安装最新版本
npm install npm @latest -g

// 安装报错，提示用root权限去执行，可以执行
sudo npm install npm @latest -g

// 安装下一个未发布的npm版本
npm install npm@next -g

三、npm安装包

【1】安装包命令

npm install <package_name> // package_name: 包名

上述命令执行之后将会在当前的目录下创建一个node_modules的目录(如果不存在的话)，然后将下载的包保存到这个目录下。安装完成之后，你就可以使用它了

【2】npm install 过程

① 发出 npm install 命令

② 查询node_modules目录之中是否已经存在指定模块，若存在，不再重新安装

③ 若不存在，npm 向 registry 查询模块压缩包的网址

④ 下载压缩包，存放在根目录下的.npm目录里

⑤ 解压压缩包到当前项目的node_modules目录

注意： 一个模块安装以后，本地其实保存了两份。一份是.npm目录下的压缩包，另一份是node_modules目录下解压后的代码。但是，运行npm install 的时候，只会检查node_modules目录，而不会检查.npm目录。也就是说，如果一个模块在.npm下有压缩包，但是没有安装在node_modules目录中，npm 依然会从远程仓库下载一次新的压缩包。

【3】强制重新安装

如果你希望，一个模块不管是否安装过，npm 都要强制重新安装，可以使用-f或--force参数。

$ npm install <package-name> --force

四、npm搭档package.json

package.json文件非常重要，因此需要单独一篇文章介绍。 ★package.json文件解析★

package.json用于管理你所安装的npm包的依赖，在开发过程中能清楚的查询安装的包的版本以及项目中使用的包依赖，便于开发组成员共享。以及项目的配置信息（比如名称、版本号、项目描述、许可证等元数据）。运行npm install命令可以自动下载package.json文件中运行和开发环境中所需的依赖

【1】dependencies

--save 安装的插件，被写入到 dependencies 对象里面去

dependencies 里面的插件是需要发布到生产环境的。

npm install <package_name> --save

【2】devDependencies

--save-dev 安装的插件，被写入到 devDependencies 对象里面去

devDependencies 里面的插件只用于开发环境，不用于生产环境

npm install <package_name> --save-dev

【3】管理依赖关系版本

如果你有package.json文件在您的目录中，然后运行npm install，NPM将查看该文件中列出的依赖项，并下载最新版本。

五、npm update

如果想更新已安装模块，就要用到 npm update 命令。它会先到远程仓库查询最新版本，然后查询本地版本。如果本地版本不存在，或者远程版本较新，就会安装。

npm update <package_name>

六、npm uninstall

如需删除node_modules目录下面的包，请执行

npm uninstall <package>

如需从package.json文件中删除依赖，需要在命令后添加参数--save或--save-dev

npm uninstall --save <package>

npm uninstall --save-dev <package>

七、npm发包流程

【1】准备工作

① 在npm官网上注册一个账号

② 注册成功之后，npm会发送一封邮件给你，点击邮件里面的链接，做确认关联操作（必需）

【2】创建自己的npm包

① 创建一个新目录

② 使用命令cd 进入到这个目录，执行npm init 命令初始化当前项目信息

image

说明：

package name：填写你这个包的名字，默认是你这个文件夹的名字
version：填写你这个包的版本，默认1.0.0
description：描述一下你这个包是干嘛用的
entry point：入口文件，默认是index.js，你也可以自己填写你自己的文件名
test command：测试命令，默认为空，直接回车就行
git repository：git仓库地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。
keywords：关键词，方便别人搜到这个包
author：你的账号
license：你的这个包遵循什么开源协议，直接回车就行

然后就会问你 Is this ok?(yes)，让你确认信息，直接回车键，回到目录文件夹下，多了一个package.json文件，打开这个文件里面的信息就是刚才填写的信息。

③ 在目录文件夹下新建一个index.js入口文件，里面填写需要发布的内容，例如：添加一个获取当前浏览器查询参数方法

exports.getUrlParams = function(key) {
    let search = window.location.search.replace(/^\?/, "");
    let pairs = search.split("&");
    let paramsMap = pairs.map(pair => {
        let [key, value] = pair.split("=");
        return [decodeURIComponent(key), decodeURIComponent(value)];
    }).reduce((res, [key, value]) => Object.assign(res, { [key]: value }), {});
    return paramsMap[key] || "";
}

【3】发布包

① 登录npm，执行npm login 命令登录，按照提示填写对应的内容

image

② 在发布之前可以在npm官网里搜索一下有没有和你包名字一样的包

image

③ 发现已有大神使用这个包名，这时候如果执行npm publish发包命名将会报以下错误，说明名字冲突

You do not have permission to publish "get-url-params". Are you logged in as the correct user? : get-url-params

④ 打开目录下的package.json文件，修改一下name包名的值，再npm publish，发包成功

image

⑤ 上npm官网里搜索刚刚发布的包，如图

image

【3】下载测试自己发布的包

① 安装

image

② 使用

import { getUrlParams } from 'get-url-query-params'
export default {
    methods: {
        getParams() {
            // 当前浏览器url为：http://localhost:8088/todayMeetingMessage.html?organizeCode=121212#/
            console.log(getUrlParams('organizeCode')) // 结果为：121212
        }
    },
}

【4】更新包

更新npm包同样是执行npm publish即可，同时需要修改版本号

最简单方式无非就是改package.json文件的version字段或者可以执行命令： npm version 1.0.1 同样可以起到修改版本号作用

对于npm包的版本号有着一系列的规则，模块的版本号采用X.Y.Z的格式，具体体现为：
1、修复bug，小改动，增加z。
2、增加新特性，可向后兼容，增加y
3、有很大的改动，无法向下兼容,增加x

【5】删除包

终端执行 npm unpublish

npm unpublish get-url-query-params@1.0.0 // 删除某个版本 @后面接版本号
npm unpublish get-url-query-params --force // 删除整个npm市场的包