从0到1开发一个自己的npm包完整过程

2024-05-28 23:23:12 浏览数 (1)

其实开发一个自己的 npm 包也不难,如果一个东西需要在我们很多项目中复用,那封装成一个公共的 npm 包就是一个很好的方式,也方便统一维护和管理,步骤主要有以下6个步骤:

  • 注册 npm 账号
  • 初始化项目
  • 开发项目
  • 本地调试
  • npm login 登录账号
  • npm publish 发布项目

1、注册 npm 账号

直接去 npm 官方网站 https://www.npmjs.com/ 注册账号,注册成功了才可以在本地用命令行登录。

2、初始化项目

跟我们平时初始化前端项目一样,直接输入 npm init 初始化项目。注意要发布到 npm 公共仓库里 private 属性要设置为 false,还确保 package.json 中的 name 字段是唯一的,否则发布时会失败,可以自己在 npm 网站上搜索包名或者通过如下命令查看是否已经存在同名包:

代码语言:shell复制
npm view <packageName>

初始化项目配置文件参考:

代码语言:json复制
{
  "name": "vant-tree-shaking",
  "version": "1.0.1",
  "description": "小程序按需引入vant组件,自动清除项目中未使用的vant组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒",
  "bin": {
    "vant-tree-shaking": "bin/vant-tree-shaking.js"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git https://github.com/cafehaus/vant-tree-shaking.git"
  },
  "keywords": [
    "vant",
    "tree-shaking",
    "miniapp",
    "wechat",
    "vue"
  ],
  "author": "cafehaus",
  "email": "510878689@qq.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/cafehaus/vant-tree-shaking/issues"
  },
  "homepage": "https://github.com/cafehaus/vant-tree-shaking#readme"
}

还有一点需要注意的是配置文件中的版本号 version 里面的值,每次发布的时候只能在前一次的基础上往上增加,否则发布的时候也会失败。

3、开发项目

很多人一想到封装这些就觉得是一件很难的事,其实除了前端中我们经常用到的 ui 组件库,还有很多东西都是可以自己来封装成 npm 包的,哪怕只是一个处理某些数据的 function 函数同样是可以发布成 npm 包的。当然,这里也不推荐大家往 npm 上随便发布一些无意义的包,但是对于我们很多项目中用到的一些自己的公共方法,就完成可以封装成一个自己的 npm 包以便在不同的项目中复用。

我们常用的大部分 npm 包主要集中在3大类:

  • ui 库,如 element-ui
  • 方法库,如 lodash
  • 命令行,如 vue cli

刚开始可以从比较简单的命令行工具入手,就比如上面配置文件中的 vant-tree-shaking,所有代码就一个110行的 js 文件,然后设置下 package.json 配置文件中的 bin 字段,这样别人 npm install vant-tree-shaking 安装好包后就可以直接通过命令行来使用这个包了。

4、本地调试

本地设置

先将本地的 npm 包链接到全局,直接在本地 npm 包源码目录下输入命令:

代码语言:shell复制
npm link

这样就会在本地的全局 npm 目录中创建一个我们自己的包的符号链接,可以通过 npm list -g 命令来查看是否生效。然后再到需要使用我们的包的项目目录中,输入命令:

代码语言:shell复制
npm link <packageName>

这样项目中就通过上一步设置的全局软链接链接到了我们本地的 npm 开发目录,使用的时候就和项目中的 node_modules 目录下安装的依赖一样的效果。而且直接修改本地的 npm 包源码,项目中使用时也会实时生效,这样对我们本地调试就很方便。

清理

调试完成后后,我们需要清理掉本地的设置。清理掉全局的软链接,随便在哪终端命令输入:

代码语言:shell复制
npm unlink -g <package-name>

清理项目中使用的全局软链接,在项目的根目录输入:

代码语言:shell复制
npm unlink <package-name>

5、npm login 登录账号

注意在终端中输入 npm login 登录的时候报错或者自动在浏览器中打开了其他网页,一般是因为我们设置了国内 npm 镜像源导致的,当需要发布 npm 包时我们需要切换到官方的仓库才可以发布的,可以通过如下设置:

查看 npm 配置信息

代码语言:shell复制
npm config list

删除设置的镜像源

代码语言:shell复制
npm config delete registry

设置成 npm 官方地址

代码语言:shell复制
npm config set registry https://registry.npmjs.org/

根据提示输入账号、密码、邮箱和 One Time Password 密码登录,登录成功了会在控制台提示你。

6、npm publish 发布项目

登录成功后,接着输入 npm punlish 就可以发布项目了,成功后也会有相应提示,然后邮箱里也会收到一封发布成功的邮件。

0 人点赞