1.DIY开发包

1.1符合标准的包结构

一个规范的包,它的组成结构,必须符合以下3点要求:

  • 包必须以单独的目录而存在
  • 包的顶级目录下,必须包含package.json这个包管理文件
  • package.json中必须包含name,version,main这三个属性,分别代表包的名字、版本号、包的入口

    注意:以上 3 点要求是一个规范的包结构必须遵守的格式,关于更多的约束,可以参考这个网址

1.2初始化包的项目结构

  1. 新建ccljy_date文件夹,作为包的根目录,尽量不要中文命名,以避免不必要的麻烦
  2. ccljy_date 文件夹中,新建如下三个文件:
  • package.json (包管理配置文件),在项目根目录打开cmd窗口,输入npm init -y快速创建
  • index.js (包的入口文件)
  • README.md (包的说明文档)

    图示:

1.3初始化package.json 配置文件

{
"name": "flightloong-tools",
"version": "1.0.0",
"description": "提供格式化时间、HTMLEscape相关功能",
"main": "index.js",
"keywords": [
"itcast",
"itheima",
"dateFormat",
"escape"
],
"license": "ISC"
}

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

// 包的入口文件 index.js

// 定义格式化时间的函数
function dateFormat (dateStr) {
const dt = new Date(dateStr) const y = padZero(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
}

1.5编写包的说明文档

  1. 包根目录中的 README.md 文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown 的格式写出来,方便用户参考
  2. README 文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可
  3. 我们所创建的这个包的 README.md 文档中,会包含以下 6 项内容
  • 安装方式
  • 导入方式
  • 格式化时间
  • 转义 HTML 中的特殊字符
  • 还原 HTML 中的特殊字符
  • 开源协议
### 安装
​```
npm i ccljy_date
​``` ### 导入
​```js
const date = require('./ccljy_date')
​``` ### 格式化时间
​```js
// 调用 dateFormat 对时间进行格式化
const dtStr = date.dateFormat(new Date())
// 结果 2020-04-03 17:20:58
console.log(dtStr)
​```
### 开源协议
ISC

2.注册 npm 账号

  1. 访问 npm 网站,点击 sign up 按钮,进入注册用户界面
  2. 填写账号相关的信息:Full NamePublic EmailUsernamePassword
  3. 点击 Create an Account 按钮,注册账号
  4. 登录邮箱,点击验证链接,进行账号的验证

3.登录 npm 账号

  1. npm 账号注册完成后,可以在项目根目录,打开cmd终端中执行 npm login 命令,依次输入用户名、密码、邮箱,每输完一个内容,按回车,即可登录成功(尽量选择网络良好的环境)
  2. 注意:在运行 npm login 命令之前,必须先把下包的服务器地址切换为 npm 的官方服务器。否则会导致发布包失败!

4.把包发布到 npm

在包的根目录打开cmd终端,运行 npm publish 命令,即可将包发布到 npm 上(注意:包名不能雷同)

5.删除已发布的包

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

开发属于自己的包,并上传到npm上的更多相关文章

  1. 上传一个npm包

    1.先创建一个npm账号 https://www.npmjs.com/signup 2.在cmd里输入命令进入项目文件夹 3.使用npm init 命令创建一个package.json(确保nodej ...

  2. 如何写一个自己的组件库,打成NPM包,并上传到NPM远程

    1.首先使用vue create my_project 构建一个自己的Vue项目 2.vue.config.js和package.json配置如下,做了些修改 const path = require ...

  3. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  4. Struts2 单个文件上传/多文件上传

    1导入struts2-blank.war所有jar包:\struts-2.3.4\apps\struts2-blank.war 单个文件上传 upload.jsp <s:form action= ...

  5. 如何把项目上传到GitHub上

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...

  6. 如何通过TortoiseGit(小乌龟)把本地项目上传到github上

    1.第一步: 安装git for windows(链接:https://gitforwindows.org/)一路next就好了, 如果遇到什么问题可以参考我另外一篇文章~^ - ^ 2.第二步:安装 ...

  7. 功能强大的文件上传插件带上传进度-WebUploader

    WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...

  8. 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)

    我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...

  9. 在IDEA中搭建Java源码学习环境并上传到GitHub上

    打开IDEA新建一个项目 创建一个最简单的Java项目即可 在项目命名填写该项目的名称,我这里写的项目名为Java_Source_Study 点击Finished,然后在项目的src目录下新建源码文件 ...

随机推荐

  1. python编码问题:UnicodeDecodeError: 'gbk' codec can't decode byte 0xaf in position 68: illegal multibyte sequence

    import yaml def test_yaml(): f = open('C:\hogwarts\Scripts\hogwarts-api\demo\yaml_data.yml') print(y ...

  2. DevOps与CICD简介

    整体知识点 ·Devops与CI/CD简介 ·Gitlab安装与Git命令使用 ·Gitlab实现持续集成 ·Gitlab实现分支管理 ·Jenkins简介及安装 ·Jenkins插件管理及基础配置 ...

  3. three.js 材质翻转

    刚学.这个鸟玩意儿卡了半天,记录一下. var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); //创建一个完整的天空盒,填入几何模型和材质的参数 ...

  4. cas的基础配置

    去除HTTPS的j基础认证方式 cas的:deployerConfigContext.xml <!-- Required for proxy ticket mechanism. -->&l ...

  5. c++ 的学习笔记 第一集cim cout

    1. 你要用这个东西,所以得有包含它得头文件,就像java 你要用某个模块,你得包含这个模块 模块化??单片机里面学的模块化(可以在vs里面实现) 2. 当我把注册表regedit 程序删除之后成功了 ...

  6. 👊 Spring技术原理系列-从零开始教你SpringEL表达式使用和功能分析讲解指南(上篇)

    Spring EL表达式语言,这种语言jsp中学到的el,但是在整个spring之中其表达式语言要更加的复杂,而且支持度更加的广泛,最重要的是他可以进行方法的调用,对象的实例化,集合操作等等,但是唯一 ...

  7. $hadow$ocks与Privoxy基础原理

    $hadow$ocks与Privoxy基础原理 以下所有提到$hadow$ocks的均以ss指代 为什么要用ss呢? 在早期(如今绝大多数也是),对于互联网的访问流程是及其简单的:浏览器(或其他客户端 ...

  8. canvas 实现简单的画板功能 1.0

    canvas 实现自由画线,变换颜色.画笔大小,撤销上一步等简单功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  9. 如何在前端通过JavaScript创建修改CAD图形

    背景 在之前的博文CAD图DWG解析WebGIS可视化技术分析总结.CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap中讲解了如何把CAD的DWG格式的图纸Web可视化的方案,那在Web ...

  10. silky微服务快速开始

    项目介绍 Silky框架旨在帮助开发者在.net平台下,通过简单代码和配置快速构建一个微服务开发框架. Silky 通过 .net core的主机来托管微服务应用.通过 Asp.Net Core 提供 ...