美文网首页
开发属于自己的包

开发属于自己的包

作者: 過尽千帆_YL | 来源:发表于2021-05-21 01:01 被阅读0次

1. 需要实现的功能

① 格式化日期

② 转义 HTML 中的特殊字符

③ 还原 HTML 中的特殊字符

1.1.需要实现的功能

shi1.png

1.2. 需要实现的功能

teshu2.png

1.3. 需要实现的功能

shuchu3.png

2. 初始化包的基本结构

① 新建 yiliang-tools 文件夹,作为包的根目录

② 在 yiliang-tools 文件夹中,新建如下三个文件:

  • package.json (包管理配置文件)

  • index.js (包的入口文件)

  • README.md (包的说明文档)

3. 初始化 package.json

chushihua4.png

4. 在 index.js 中定义格式化时间的方法

// 定义格式化时间的函数
function dateFormat(dateStr) {
  const dt = new Date(dateStr)

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

  const hh = padZero(dt.getHours())
  const mm = padZero(dt.getMinutes())
  const ss = padZero(dt.getSeconds())

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 定义一个补零的函数
function padZero(n) {
  return n > 9 ? n : '0' + n
}

module.exports = {
  dateFormat
}

5. 在 index.js 中定义转义 HTML 的方法

// 定义转义 HTML 字符的函数
function htmlEscape(htmlstr) {
  return htmlstr.replace(/<|>|"|&/g, match => {
    switch (match) {
      case '<':
        return '&lt;'
      case '>':
        return '&gt;'
      case '"':
        return '&quot;'
      case '&':
        return '&amp;'
    }
  })
}

6. 在 index.js 中定义还原 HTML 的方法

// 定义还原 HTML 字符串的函数
function htmlUnEscape(str) {
  return str.replace(/&lt;|&gt;|&quot;|&amp;/g, match => {
    switch (match) {
      case '&lt;':
        return '<'
      case '&gt;':
        return '>'
      case '&quot;':
        return '"'
      case '&amp;':
        return '&'
    }
  })
}

7. 将不同的功能进行模块化拆分

① 将格式化时间的功能,拆分到 src -> dateFormat.js 中

② 将处理 HTML 字符串的功能,拆分到 src -> htmlEscape.js 中

③ 在 index.js 中,导入两个模块,得到需要向外共享的方法

④ 在 index.js 中,使用 module.exports 把对应的方法共享出去

8. 编写包的说明文档

包根目录中的 README.md 文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown 的

格式写出来,方便用户参考。

README 文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。

我们所创建的这个包的 README.md 文档中,会包含以下 6 项内容:

安装方式、导入方式、格式化时间、转义 HTML 中的特殊字符、还原 HTML 中的特殊字符、开源协议

发布包

1. 注册 npm 账号

① 访问 https://www.npmjs.com/ 网站,点击 sign up 按钮,进入注册用户界面

② 填写账号相关的信息:Full Name、Public Email、Username、Password

③ 点击 Create an Account 按钮,注册账号

④ 登录邮箱,点击验证链接,进行账号的验证

2. 登录 npm 账号

npm 账号注册完成后,可以在终端中执行 npm login 命令,依次输入用户名、密码、邮箱后,即可登录成功。

命令1.png

3. 把包发布到 npm 上

将终端切换到包的根目录之后,运行 npm publish 命令,即可将包发布到 npm 上(注意:包名不能雷同),文件前面显示一个 + 代表上传完成

22.png

4. 删除已发布的包

运行 npm unpublish 包名 --force 命令,即可从 npm 删除已发布的包。

3333333333.png

注意:

① npm unpublish 命令只能删除 72 小时以内发布的包

② npm unpublish 删除的包,在 24 小时内不允许重复发布

③ 发布包的时候要慎重,尽量不要往 npm 上发布没有意义的包!

相关文章

网友评论

      本文标题:开发属于自己的包

      本文链接:https://www.haomeiwen.com/subject/dfsbjltx.html