IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 手把手教你开发一个自己的包 -> 正文阅读

[JavaScript知识库]手把手教你开发一个自己的包

手把手教你发个包

包? 书包? lv包,都不是,说到包对于程序员的开发中会起到很大的做作用,是我们开发中不可或缺的一部分,今天我就手把手教你做一个包

1.什么是包

概念 : 在Node.js中,包就是第三方模块就叫做包;

1.1?Node.js中三种模块

  • 内置模块

  • 自定义模块

  • 第三方模块

    而在我们开发的过程中使用的包,就是第三方模块

2.为什么需要包

1.由于Node.js内置模块仅仅提供了一些底层的API,导致你在开发的过程中功能相对较少,影响开发效率

2.包是基于内置模块封装出来的,提供了更高级,更方便的提供的API,大大的提高了开发效率,让你开发出来的项目逼格直接提升了起来

3.包和内置模块之间的关系,和jQuery和浏览器内置API之间的关系

3.包的来源

包是有第三方的个人或者团队制作出来的,它不同于Node.js的内置模块和自定义模块

重点:免费下载!!!!

2.2 如何下载一个包

1.在你下载Node.js的时候,全名叫做?Node Package Manager(简称npm包管理工具)的管理工具跟随Node.js一起安装到了你的电脑上

2.使用npm install指令

npm官网:?npm

  npm install 包的完整名称
  
   //npm i是简写,没有任何区别
  npm i 包的完整名称

3.指定包的版本

npm i 包的名称@2.22.2

5.开发并上传一个属于自己包

5.1规范的包结构

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

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

5.2 初始化包的结构

1.新建?itheima-tools?文件夹,作为包的根目录

2.在?itheima-tools?文件夹中,新建如下三个文件:

  • package.json?(包管理配置文件)
  • index.js?(包的入口文件)
  • README.md?(包的说明文档)

5.3 初始化?package.json?配置文件

5.4 初始化?package.json?配置文件

{

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

注意事项: 1.name是独一无二的,建立之前建议去官网查询此名字

2.version是版本号,更新后只能需累加再上传,版本号只能增加,不能减小

3.main是所指向的能暴露出的代码

4.license是否符合ISO协议

5.5 在?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
}
// 测试代码
const lvpackage = require('./flightloong-tools/index')
// 格式化时间的代码
const dtStr = lvpackage.dateFormat(new Date())
console.log(dtStr) // 2020-06-23 01:16:57

5.6 划分不同的模块

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

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

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

// dateFormat.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
}

5.7 编写包的说明文档

  1. 包根目录中的?README.md?文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以?markdown?的格式写出来,方便用户参考

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

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

    • 安装方式
    • 导入方式
    • 格式化时间
    • 开源协议
### 安装

npm i flightloong-tools

### 导入js

const lvpackage = require('./flightloong-tools')

### 格式化时间

// 调用 dateFormat 对时间进行格式化
const dtStr = lvpackage.dateFormat(new Date())
// 结果  2021-10-07 11:20:58
console.log(dtStr)

### 开源协议
ISC

5.8 注册?npm?账号

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

5.9 登录?npm?账号

  1. npm?账号注册完成后,可以在终端中执行?npm login?命令,依次输入用户名、密码、邮箱后,即可登录成功
  2. 注意:在运行?npm login?命令之前,必须先把下包的服务器地址切换为?npm?的官方服务器。否则会导致发布包失败!

5.10 把包发布到?npm

将终端切换到包的根目录之后,运行?npm publish?命令,即可将包发布到?npm?上(注意:包名不能雷同)

5.14 - 删除已发布的包

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

  2. 注意事项

    • npm unpublish?命令只能删除 72 小时以内发布的包
    • npm unpublish?删除的包,在 24 小时内不允许重复发布
    • 发布包的时候要慎重,尽量不要往?npm?上发布没有意义的包!
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-08 11:42:45  更:2021-10-08 11:44:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 0:44:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码