开发并发布自己的npm包

最新推荐文章于 2024-05-27 22:49:23 发布
最新推荐文章于 2024-05-27 22:49:23 发布
阅读量930 收藏 17
点赞数 12
分类专栏： Nodejs 文章标签： npm arcgis 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44741577/article/details/136453194
版权

文章目录

一、需要实现的功能

  • 日期格式化
  • html转译
  • html转译后再还原
 // 1，导入自己的包
const ywbTools= require('ywb-tools')
 // ------- 功能1: 格式化日期------
const dt = ywbTools.dateFormat(new Date())
// 输出 2020-01-20 10:09:45
console.log(dt)
// ------- 功能2: 转义 HTML 中的特殊字符-----
const htmlStr = '<h1 style="color: red;">你好! &copy;<span>小黄! </span></h1>'
const str = ywbTools.htmlEscape(htmlstr)
console.log(str)
// &lt;h1 style=&quot;color: red;&quot;&gt;你子! &amp;copy;&lt;span&gt;小黄! &lt;/span&gt;&lt;/h1&gt;
---- 功能3: 还原 HTML 中的特殊字符---
const rawHTML = ywbTools.htmlUnEscape(str)
// 输出 <h1 style="color: red;">你好! &copy;<span>小黄! </span></h1>
console.log(rawHTML)

二、初始化包的基本机构

2.1. 初始化目录结构

  • 新建ywb-tools 文件夹，作为包的根目录
  • 在ywb-tools文件夹中，新建如下三个文件：
    package.json (包管理配置文件)
    index.js (包的入口文件)
    README.md (包的说明文档)

image.png

2.2. 初始化 package.json

{
  "name": "ywb-tools",
  "version": "1.0.1",
  "main": "index.js",
  "description": "提供了格式化时间、HTMLEscape相关功能",
  "keywords": [
    "ywb",
    "dateFormate",
    "escape"
  ],
  "license": "ISC"
}
  • name包名
  • version版本号
  • main入口文件
  • description描述
  • keywords搜索关键词
  • license开源许可协议

三、定义格式化时间的函数

  • 在index.js定义格式化时间的函数
/* 格式化工具 */
function dateFormate(dateStr) {
  const dt = new Date(dateStr);

  const y = dt.getFullYear();
  const m = pdZero(dt.getMonth() + 1);
  const d = pdZero(dt.getDate());

  const hh = pdZero(dt.getHours());
  const mm = pdZero(dt.getMinutes());
  const ss = pdZero(dt.getSeconds());
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}

/* 补零工具 */

function pdZero(n) {
  return n > 9 ? n : "0" + n;
}
/* 向外暴露成员 */
module.exports = {
  dateFormate,
};
  • 使用
/* 引入方式一 */
const ywbTools = require("../ywb-tools/index");
/* 引入方式二---
1.寻找ywb-tools文件夹下面的package.json
2.寻找package.json的main属性
3.加载main属性的地址 */
const ywbTools = require("../ywb-tools");

// 格式化时间功能
const dtStr = ywbTools.dateFormate(new Date()); //2023-09-10 11:34:16
console.log(dtStr);

四、定义转义 HTML的方法

  • 在indexjs 中定义转义 HTML的方法
/* 定义转译HTML的字符的函数 */

function htmlEscape(htmlStr) {
  return htmlStr.replace(/<|>|"|&/g, (match) => {
    switch (match) {
      case "<":
        return "&lt;";
      case ">":
        return "&gt;";
      case '"':
        return "&quot;";
      case "&":
        return "&amp;";
    }
  });
}

/* 暴露 */
module.exports = {
  dateFormate,
  htmlEscape,
};
  • htmlEscape使用
/* 引入方式一 */
// const ywbTools = require("../ywb-tools/index");
/* 引入方式二---
1.寻找ywb-tools文件夹下面的package.json
2.寻找package.json的main属性
3.加载main属性的地址 */
const ywbTools = require("../ywb-tools");

const htmlStr = '<h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>';
const str = ywbTools.htmlEscape(htmlStr);
// &lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt;
console.log(str);

五、定义HTML还原方法

  • 在indexjs 中定义HTML还原
/* 定义HTML还原的函数 */

function htmlUnEscape(htmlStr) {
  return htmlStr.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
    switch (match) {
      case "&lt;":
        return "<";
      case "&gt;":
        return ">";
      case "&quot;":
        return '"';
      case "&amp;":
        return "&";
    }
  });
}

/* 暴露 */
module.exports = {
  dateFormate,
  htmlEscape,
  htmlUnEscape,
};
  • htmlUnEscape使用
/* 引入方式一 */
// const ywbTools = require("../ywb-tools/index");
/* 引入方式二---
1.寻找ywb-tools文件夹下面的package.json
2.寻找package.json的main属性
3.加载main属性的地址 */
const ywbTools = require("../ywb-tools");

const str =
  "&lt;h1 title=&quot;abc&quot;&gt;这是h1标签&lt;span&gt;123&amp;nbsp;&lt;/span&gt;&lt;/h1&gt;";
const htmlStr= ywbTools.htmlUnEscape(str);
console.log(htmlStr);
// <h1 title="abc">这是h1标签<span>123&nbsp;</span></h1>

六、将不同的功能进行模块化拆分

  • 将格式化时间的功能，拆分到 src -> dateFormat.js 中
  • 将处理 HTML 字符串的功能，拆分到 src -> htmlEscape.js 中在indexjs 中，*
  • 导入两个模块，得到需要向外共享的方法在indexjs 中，
  • 使用module.exports 把对应的方法共享出去

image.png

6.1. dateFormat.js

/* 格式化工具 */
function dateFormate(dateStr) {
  const dt = new Date(dateStr);

  const y = dt.getFullYear();
  const m = pdZero(dt.getMonth() + 1);
  const d = pdZero(dt.getDate());

  const hh = pdZero(dt.getHours());
  const mm = pdZero(dt.getMinutes());
  const ss = pdZero(dt.getSeconds());
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}

/* 补零工具 */

function pdZero(n) {
  return n > 9 ? n : "0" + n;
}

module.exports = {
  dateFormate,
};

6.2. htmlEscape.js

/* 定义转译HTML的字符的函数 */

function htmlEscape(htmlStr) {
  return htmlStr.replace(/<|>|"|&/g, (match) => {
    switch (match) {
      case "<":
        return "&lt;";
      case ">":
        return "&gt;";
      case '"':
        return "&quot;";
      case "&":
        return "&amp;";
    }
  });
}

/* 定义HTML还原的函数 */

function htmlUnEscape(htmlStr) {
  return htmlStr.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
    switch (match) {
      case "&lt;":
        return "<";
      case "&gt;":
        return ">";
      case "&quot;":
        return '"';
      case "&amp;":
        return "&";
    }
  });
}
/* 暴露 */
module.exports = {
  htmlEscape,
  htmlUnEscape,
};

6.3. index.js

// 包的入口文件
const date = require("./src/dateFormat");
const escape = require("./src/htmlEscape");
/* 暴露 */
module.exports = {
  ...date,
  ...escape,
};

七、README.md维护

image.png
image.png

八、包发布

8.1. 注册npm账号

  • 访问 https://www.npmjs.com/ 网站，
  • 点击 sign up 按钮，进入注册用户界面 填写账号相关的信息: Full Name、Public Email、Username（不能是纯数字）、 Password
  • 点击 Create an Account 按钮，注册账号
  • 登录邮箱，点击验证链接，进行账号的验证

8.2. 切换为 npm 的官方服务器

注意： 在运行npm login 登录命令之前，必须先把下包的服务器地址切换为 npm 的官方服务器。否则会导致发布包发布失败

  • 方法一：使用nrm镜像源管理工具

image.png

  • 方法二：手动设置下载地址
// 设置官方服务器镜像的地址
npm config set registry https:/registry.npmjs.org/
// 查看当前的下载地址
npm config get registry

8.3. 登录

npm login

8.4. 发布包

找到自己的开发包的根目录运行npm publish

image.png

8.5. 安装包并使用

image.png

  • 可以看到已经安装好了
    image.png
  • 可以看到已经正确安装并使用
    image.png
扶苏1002
关注
  • 12
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
npm包开发和避坑指南
weixin_47953114的博客
03-19 993
不过很奇怪的是有些能正常运行有些就会出现这种问题，初步怀疑是 vue-loader 和 node 版本的兼容问题，欢迎大家指正~坑三：版本号必须遵循语义化版本控制（SemVer），并且每次发布新版本时，版本号需递增，不能与已发布的版本相同。排查了很久才发现是项目插件无法识别业务组件中的链式判定，类似（?准备两个基础项目，一个用于测试一个用于开发包，适合自己的框架就好。注意：请一定记好自己的账号、密码以及绑定的邮箱（后续会使用到）在取名前先查询一下，如果是这样的那就说明已经有人注册了，不能用。
NPM 包的开发指南
palerock的博客
06-28 1516
NPM， 全称 Node Package Manager，用过 Javascript 做开发的朋友应该都知道这个东西，其实严格上来说，NPM 是随同 NodeJS 一起安装的包管理工具，能解决 NodeJS 代码部署上的很多问题。 无论是前端开发，还是 Node 服务器的搭建，我们都会不可避免地使用到 NPM，通过 NPM 我们可以引用第三方的库/框架到自己的项目中，并且在使用起来特别简洁，只需要一行代码，以常用的库来说: npm install vue express 以上命令便在当前项目中很快地安装了
如何发布自己的npm包
qq_49080170的博客
08-04 3944
发布npm包
从0到1开发一个自己的npm包完整过程
最新发布
cafehaus的博客
05-27 861
很多人一想到封装这些就觉得是一件很难的事，其实除了前端中我们经常用到的 ui 组件库，还有很多东西都是可以自己来封装成 npm 包的，哪怕只是一个处理某些数据的 function 函数同样是可以发布成 npm 包的。当然，这里也不推荐大家往 npm 上随便发布一些无意义的包，但是对于我们很多项目中用到的一些自己的公共方法，就完成可以封装成一个自己的 npm 包以便在不同的项目中复用。这样就会在本地的全局 npm 目录中创建一个我们自己的包的符号链接，可以通过 npm list -g 命令来查看是否生效。
如何开发一个 npm 包？
weixin_43852267的博客
02-23 4941
作为前端工程师，npm 包是我们再熟悉不过的东西。 但是，你有没有想过，开发一个 npm 包有多容易！ 这篇文章，我将通过一个小项目，带你入门开发 npm 包，源码可在 Github 查看： load-markdwon-image 首先，我们将开发一个小工具。 这个小工具可以将 markdown 文件中的网络图片下载到本地，并替换为本地路径。 使用这个小工具，只需命令行调用： load-md-image test.md 运行效果如图所示： 也许，你可以先安装这个 npm 包体验一下： npm insta
如何发布一个npm包
weixin_45032067的博客
06-23 8046
如何发布一个自己写的npm包
发布自己的npm包并使用
09-19
本篇文章将深入讲解如何创建并发布自己的npm包，以及发布后如何在项目中使用。 一、创建npm包 1. 初始化项目：首先，你需要在本地创建一个新的项目目录，并通过`npm init`命令初始化一个npm项目。执行这个命令后，...
使用typescript开发angular模块并发布npm包
01-21
本文介绍了使用typescript开发angular模块并发布npm包，分享给大家，具体如下： 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下，name默认为文件夹名称 { name: MZC-...
如何将个人开发包发布到npm上.md
06-08
如何在npm上发布个人开发包，总结了一下发布的方法，以及部分命令的解读。 首先你的电脑上需要安装node插件，再从搭建环境开始，到创建用户，最后一步步将自己的开发包发布到npm上。
npm基于vite制作自己的npm包+ts超详细
07-28
在创建npm包的过程中，首先需要在项目根目录下初始化一个新的npm包，通过`npm init`或`yarn init`命令。然后，根据项目需求安装Vue3、Vite、TypeScript以及任何其他依赖。接着，配置`tsconfig.json`以适应TypeScript...
从零使用TypeScript开发项目打包发布到npm
11-21
typescript作为未来前端开发的主流框架，在前端开发的过程中也会越来越主要，相信这篇文章会对你有很大的帮助！ 开发环境搭建 创建ming-npm-package文件夹 我在桌面上创建了一个ming-npm-package的文件夹，然后在...
如何发布一个 npm 包
BASK2312的博客
12-02 6886
npm（node package manager）作为 Node.js 的包管理工具，让世界各地的 JavaScript 开发者方便复用、分享代码以及造轮子；本文将介绍如何发布一个 npm 包，以及使用工具来自动化管理发布 npm 包；准备 npm 账号 & 示例包代码；初始化 & 配置 package.json 文件；确定发布的包版本；发布 npm 包；使用 cli 工具 release-it 来自动管理版本、发布包等；学习 npm init release-it 原理。
开发npm包
BUG小太阳
12-16 568
npm发布
如何开发自己的npm依赖包，开发-本地调试-打包发布到自己的镜像库
lingliu0824的博客
08-24 4989
如果希望打包的文件具有命名空间如@vue，只需修改pacakge.json的name，在前面加上命名空间，再执行步骤2的打包命令。
【npm开发指南（1）】从npm包的开发，发布到引用
qq_37704442的博客
09-08 1278
npm包的开发，发布到引用
如何发布自己的npm包如何在项目中使用自己发布的包
06-07
发布自己的npm包的步骤如下： 1. 在npm官网注册账号。 2. 打开终端，使用npm login命令登录自己的账号。 3. 创建一个新的npm包，可以使用npm init命令进行初始化。 4. 编写自己的代码并进行测试，确保包的功能正常。 5. 使用npm publish命令发布自己的包。 在项目中使用自己发布的包的步骤如下： 1. 在自己的项目中使用npm install命令安装自己发布的包。 2. 在代码中引入自己的包，例如：const myPackage = require('my-package')。 3. 使用自己的包提供的功能进行开发。 需要注意的是，发布的包名要尽量避免与其他包名重复，否则可能会引发冲突。同时，发布的包需要遵循npm官方的规范，建议先了解npm的相关文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值