教你如何写一个npm包并发布

背景

最近因为工作中经常多个项目并行开发，为了调试方便会放一些“魔数”，有时候太忙就会在上线前忘记删掉它们，为了防止上环境前的后悔莫及，想写一个npm包来查找自己写的tag(比如// warning)，以期能够达到：如果有目标tag，就中断build进程并告知tag位置在何处；如果没有，就继续进行build进程。

功能落地

这个功能比较简单：先找到所有文件，然后遍历所有文件，再对这些文件进行正则匹配。因为本文主要是介绍如何写npm包并发布，侧重于npm包结构和发布部分，所以逻辑部分暂时跳过，如感兴趣，可见todo-tree-checker。

• 编写npm包

可以新建文件夹直接手撕package.json文件，具体配置可以参考package.json，但我建议在终端使用npm init命令，这样会更省事一些；

npm init

在初始化完成并打开项目之后，我们进入到package.json文件，进行一下配置，常见配置有：

| - {                                                                      |
|   | "name": "todo-tree-checker",                                         |项目名称
|   | "version": "1.0.0",                                                  |项目版本
|   | "description": "todo-check vite-plugin npm package",                 |项目描述
|   | "main": "./lib/index.js",                                            |项目运行主入口
|   | "scripts": {                                                         |
|   |   "test": "echo \"Error: no test specified\" && exit 1",             |脚本-测试命令
|   |   "rollup": "rollup --config rollup.config.js"                       |脚本-rollup命令-△
|   | },                                                                   |
|   | "repository": {                                                      |项目库-○
|   |   "type": "git",                                                     |访问库的方式
|   |   "url": "git+https://github.com/tcguoxing/todo-tree-checker.git"    |库存储的地址
|   | },                                                                   |
|   | "keywords": [                                                        |关键字-□
|   |   "todo-tree",                                                       |
|   |   "check"                                                            |
|   | ],                                                                   |
|   | "bin": {                                                             |终端命令行映射到本地文件-×
|   |   "todo-tree-checker": "./bin.js"                                    |
|   | },                                                                   |
|   | "author": "tcguoxing",                                               |作者
|   | "license": "MIT",                                                    |协议
|   | "bugs": {                                                            |
|   |   "url": "https://github.com/tcguoxing/todo-tree-checker/issues"     |提bug的地址
|   | },                                                                   |
|   | "homepage": "https://github.com/tcguoxing/todo-tree-checker#readme", |项目首页
|   | "dependencies": {                                                    |项目依赖包
|   |   "fs-extra": "^10.1.0",                                             |
|   |   "minimist": "^1.2.6"                                               |
| - }                                                                      |

解释一下小圆标部分：
△：本项目编译机器全局安装了rollup,所以下方依赖项并没有rollup的安装；
○：项目库的地址，可以不写，提供可以让玩家以另一种方式安装你的包，具体详见npm-install;

npm install git+https://github.com/tcguoxing/todo-tree-checker.git

□：提供合适的关键字可以让你的项目在npmjs中权重更高；
×：可以将npm run 中的command映射到本地node_modules文件夹下的bin/todo-tree-checker文件，为此你就可以在终端使用；

package.json:
    "script": {
        "check": "todo-tree-checker"
    }
terminal:
    npm run check 

项目文件结构如下图所示：

• 包的发布

由于本篇文章着重于如何创建一个npm项目并把它发布到npmjs上去，所以关于该包的具体逻辑，这里暂时不展开讨论，接下来我们着重解释如何将其发布到npmjs上去。

• 我们需要先在npm上注册一个账号；
• 在注册完账号后，本地打开自己的项目，在终端输入以下命令来添加用户：npm adduser，添加成功后会有如下提示：
• 在添加可以使用npm publish命令来发布你自己写的第一个npm包，类似于以下画面：
• 然后，你就可以使用npm install 你包的名称来安装你自己的npm包了。

总结

这就是一个npm包的发布并使用的流程，由于前后拖得时间比较久，所以前后的文章重心可能不一样，希望不要介意，如果有疑问或者不对的地方，还请留下评论，如果文章对你有帮助的话，还希望能点个赞。