从零开发一个自己的npm包

这篇文章内容主要是记录一下完整的 npm包的开发、发布流程，以及一些关键的配置和踩坑。

最近，在业务开发中遇到一个需求，列表中有一个需要展示大段 JSON字符串的字段，但是列表的尺寸有限，所以我打算优化一下：该字段在列表中占固定宽度，支持点击弹出框展示。这里就需要一个能够将 JSON字符串格式化的函数来实现（类似 Json.cn）。

其实功能实现很简单，也在线上发布了这个 Feature。但是感觉这个功能还是有实用价值，干脆做成 npm包，提供给团队使用。顺便记录一下完整的开发发布流程。

创建、初始化项目

可以先在 GitHub 上创建空项目，比如 json-stringify-format，然后 git clone 到本地。在根目录上（确保你的环境中有 npm，安装了 node 会同时自动安装 npm）

npm init

然后根据提示，完成基本项目信息的填写、确认，一路回车即可。如果能接收所有默认配置，那么大胆执行这条命令：

npm init -y    /** -y === yes */

这时，根目录会生成一个 package.json 文件。

配置 eslint

为什么要配置代码风格包，因为很可能我们的项目是需要多人完成开发的，一套统一的代码风格规则，可以保证良好的开发体验，减少一些不必要的代码错误。

npm install eslint --save-dev

package.json 中加入 script 执行语句：

"lint": "eslint --fix src" // 支持检查 src 目录下的文件的代码格式

配置 Babel

我们的🔧工具包，可能是用 ES6+ 以上的语法编写，在一些低版本的浏览器中无法正常使用。所以我们需要使用 Babel 编译器工具链，将 ES6+ 的代码转换成向后兼容的 JavaScript 语法。

🚪附上之前记录的配置文章

package.json

script

一般开发项目需要用的script 最基本的有 lint、test、watch、build。

  "scripts": {
    "build": "npm run ts && npx babel src --out-dir lib --presets=@babel/env",
    "watch": "concurrently 'npm run watch:ts' 'npx babel src --watch --out-dir lib --presets=@babel/env'",
    "watch:ts": "tsc --watch src/index.ts",
    "watch:babel": "npx babel src --watch --out-dir lib --presets=@babel/env",
    "ts": "tsc src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint --fix src"
  },

build 可以直接使用 babel 提供的命令行语句，在lib目录下生成将转换后的代码。

main

main 属性配置你的入口文件，一般是 dist/index.js or lib/index.js。

"main": "lib/index.js",

到时候在应用包的时候，只需要：

import jsonFormat from 'json-stringify-format'

开发

.
├── README.md
├── babel.config.js
├── lib
│   └── index.js
├── package-lock.json
├── package.json
└── src
    ├── index.js
    └── index.ts

可在 src 目录下编写自己的代码，在 lib 目录下生成最后的代码。

测试

略。

发布

如果没有 npm 账号，先注册。完成注册后。

1. 登陆，npm adduser
2. 检查当前账号 npm whoami
3. 发布，npm publish

注意⚠️：
如果你使用了淘宝的 npm 镜像，那么发布可能会失败。请确保使用的是红框中的配置。

推荐使用 nrm 包工具管理 npm 镜像。

参考

• https://juejin.im/post/5af7de01f265da0ba60fe37c