什么是NPM

NPM（Node Package Manager），一个 Node.js 的包管理工具。本文不是 npm 的教程，简单说一下，最显著的作用就是用来管理和共享代码的。

我的代码为什么要发布到NPM

相信每个开发现代化工程的前端，都或多或少接触过 NPM ，也或许敲了无数次的 npm i xxx ，同时我也相信，每一个前端在自己的开发生涯中，或多或少的总结了各种奇淫巧技，封装了各种函数工具。

但是我们都知道每次 npm i 下来的东西有什么作用，如何使用，但从来没有 npm i 过自己的代码。

我们每次切换新的项目都会复制一份到新项目里，甚至在别人问的时候，直接发了段代码过去。

所以我为什么要发布自己的代码到 NPM 呢？

一是为了自己方便，更换工程的时候直接一个 npm i my-xxx 就能在新项目里使用自己封装的骚操作。

二是为了他人方便，当别人需要的时候，只需告诉他安装什么什么包，然后看 README，完活。

如何发布代码到NPM

首先你要有个 NPM 账号

你要到👉👉NPM官网注册一个账号。注册账号就不详细讲了，就跟你注册大多数网站的账号是一样的，很傻瓜🤣，然后记下自己的 用户名，密码，和邮箱。

然后你要新建一个文件夹

新建一个文件夹，命名没有要求，正常开发项目怎么命名，这里就怎么命名就行。

配置包的参数

进入到目标文件夹，我们终端输入

npm init

然后会让我们输入一些配置项，来看看都有哪些内容

package name： 括号里面这个就是替你默认把文件夹名放在这里了，直接使用就行，也可以改成其他的。这是我们后面用于下载时候的包名。
version： 版本号。括号里默认是 1.0.0 ，并且需要遵循 x.x.x 的格式。
description： 编写描述信息，有助于人们在 npm 库中搜索的时候发现你的模块。
entry point： 指定了加载的入口文件，默认是 index.js。
test command： 测试指令，本文用不到，可以不填。
git repository： 指定一个代码存放地址，，本文用不到，可以不填。
keywords： 关键字，有助于人们在 npm 库中搜索的时候发现你的模块。
author： 作者的名字。
license： 当前项目的协议，让用户知道他们有何权限来使用你的模块，默认是 ISC。

全部输入完以后，会给我们一个预览，问我们这样可以吗，然后我们回车即可。

之后会在根目录下生成一个 package.json 的文件。内容就是我们刚刚配置的哪些。

//package.json
{
  "name": "testnpm",
  "version": "1.0.0",
  "description": "this is a test package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "test"
  ],
  "author": "yiweiliuying",
  "license": "ISC"
}

生成package-lock.json

执行下方命令，生成 package-lock.json 文件，方便我们查看和调试。

npm link

登录账号

npm login 
//然后输入Username Password Email 即可

我这里用淘宝源的时候报了 500 错误，改成 npm 的源就好了，当看到 Logged in as hanzhiwei0174 on https://registry.npmjs.org/.。 就说明我们登录成功了。

添加于2022-02-17

出现 Enter one-time password ... ... 的错误可以参考下面这篇文章解决

👉👉 npm login登录失败. code E409。Enter one-time password

不用安装什么东西，到最后一步把邮箱收到的验证码输入在命令行里就行了。

然后就可以发布我们的代码了

npm publish

发现图中报了 403 的错误，这是因为我们的包名已经被别人使用了，所以我们需要修改一下。

修改完以后再次运行 npm publish ，当我们看到 +xxx 就证明我们已经发布成功了。现在去 npm 的官网看一下。

可以看到我们的代码就成功的被发布到 npm 上了。

如何使用已经发布的NPM包

这个步骤其实有点多余，谁还没通过 npm 使用过别人的库了。

毕竟是自己的库，搞一手。

我随便找了个 vue3 的项目

npm i vuf3 -s

然后在 node_modules 找一下，打开 index.js 发现和我们之前写的一模一样。

import { test } from 'vuf3';

测试一下

<template>
  <div>
    <button @click='handleTest'>测试NPM</button>
  </div>
</template>

<script>
import { test } from 'vuf3';

export default {
  setup () {
    const handleTest = () => {
      test(123);
    };

    return {
      handleTest,
    };
  },
};
</script>