玩命加载中 . . .

【前端监控系统开发实录】之 SDK 发布至 npm


配置 npm 包

将想要发布到 npm 上的项目开发完毕。

默认读者已经经过npm init等一系列操作开发完毕,SDK 的开发过程具体看笔者的其他文章。

这里具体讲解package.json的配置:

  • name:包名
  • version:包的版本号,每次发包这个版本号都要改
  • description:包的描述
  • main:包默认执行的js文件(包的入口)
  • author:作者
  • license:包遵循的开源协议
  • keywords:关键字,供 npm 上模糊搜索到包
  • dependencies(生产依赖):记录在开发和项目上线之后都需要用到的包
  • devDependencies(开发依赖):记录只在项目开发阶段会用到的包
  • scripts:定义一些脚本命令,可以起一个别名,方便运行
  • repository:关联 github 仓库地址
  • private:是否私有,一般都是false

步骤

  1. keywords的值一个字符串数组,每个字符串必须为 双引号

  2. 添加 LICENSE:这里使用MIT协议类型

    MIT License
    
    Copyright (c) 2022 ursheep
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:
    
    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.
    
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
  • Copyright (c) 2022 foursheep 这一行,2022 是年份,自行修改为当前年份;foursheep 是作者姓名,改成你自己的。
  • package.json里修改license字段值为MIT
  1. 配置 npm 上传白名单

配置 npm 上传的文件白名单,可以指定哪些文件上传哪些不上传,比如我这里不想直接发布 src 里的 index.ts 源码,而是发布dist目录下的monitor.js(index.ts压缩后的文件),按以下配置:

  • package.json里,修改main字段的路径指向dist/monitor.js
  • 添加files字段来配置要上传 npm 的文件白名单目录:
    "files": [
      "dist"
    ]
    这样dist文件夹会上传 npm ,而 src 文件夹就不会上传。

想保存 src 源码就上传项目到 git 远程仓库就行,这样 git 仓库保存了完整项目,而 npm 只包含部分项目文件。

注意:在打包前main需指向项目的入口文件(如果指向 dist 会导致打包失败),打包后再修改为dist/

但有些文件是必定会上传的,无法控制,例如package.jsonLICENSEREADME.md等等。
当然了,也可以配置 npm 上传黑名单,在根目录下添加.npmignore文件,写入黑名单文件即可。

  1. 关联github地址

如果想把 npm 包和项目 github 地址关联起来,首先项目需要先上传到 github 上,然后package.json添加repository字段:

"repository": {
  "type": "git",
  "url": "git@github.com:HCYETY/monitor-system.git"
}

url 后的地址格式,就是用SSH的方式克隆 github 仓库的那个地址。填写该配置后,在 npm 官网的该 npm 包页面右边会显示可以跳转到 github 的链接。

总结:整体配置如下:

{
  "name": "monitor-system-sdk",
  "version": "1.0.0",
  "description": "前端监控 SDK",
  "author": "foursheep",
  "main": "dist/monitor.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": ["前端监控系统", "原生 sdk"],
  "private": false,
  "license": "MIT",
  "files": [
    "dist"
  ],
  "repository": {
    "type": "git",
    "url": "git@github.com:HCYETY/monitor-system.git"
  },
}

规范的包结构

一个规范的包结构,需要符合以下 3 点要求:

  • 包必须以单独的目录而存在;
  • 包的顶级目录下要必须包含package.json 这个包管理配置文件(npm init -y);
  • package.json中必须包含 name versionmain这三个属性,分别代表包的名字、版本号、包的入口。

注意:以上 3 点要求是一个规范的包结构必须遵守的格式,关于更多的约束,可以参考这个网址:https://yarnpkg.com/zh-Hans/docs/package-json

发布流程

  1. 发布前打包项目,确保dist是最新的;
  2. 检查package.json各配置项信息;
  3. 终端执行npm login登录 npm 账号(需先在官网上注册);
  4. 执行npm publish发包;
  5. 如果要更新自己的 npm 包及 README.md ,先后执行npm version patchnpm publish
  6. npmjs官网 上搜索发布的包名,看是否发布成功。

遇到的问题

  1. 在终端登录 npm 账号失败:
    npm 登录失败

原因:设置了国内镜像,需要修改为官网的地址。

修改方法npm config set registry https://registry.npmjs.org(官网地址)

注意:修改的地址协议是 https ,而不是 http

等 npm 包发布成功后再更改回来就行:npm config set registry https://registry.npm.taobao.org(国内镜像)

  1. 登录 npm 账号需要获取one-time password
    需要获取 one-time password

原因:2022 年后 npmjs 平台强制开发者们要开启 2FA 验证。

解决方法

注意

    1. 解法中提到的“身份验证器”可以直接在手机浏览器上搜索,找到一个灰色的图标下载即可(如下图所示):”身份验证器“照片
    1. 在“身份验证器”软件中添加账号成功后,会看到 6位数 的验证码,这个验证码就是one-time password,在终端输入后即可登录成功。

效果:如下图所示就代表登录 npm 成功了
npm 登录成功

更多文章


文章作者: hcyety
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hcyety !
评论
  目录