Node — 第九天 (ES6降级 and 发布属于自己的[第三方模块]包)

ES6降级处理

因为 ES 6 有浏览器兼容性问题,可以使用一些工具进行降级处理,例如:babel

  • 降级处理 babel 的使用步骤

    1. 安装 Node.js
    2. 命令行中安装 babel
    3. 配置文件 .babelrc
    4. 运行命令,完成降级
  • 项目初始化 (项目文件夹不能有中文)

    npm init -y
    
  • 在命令行中,安装 babel babel官网

    npm install  @babel/core @babel/cli @babel/preset-env
    
  • 配置文件 .babelrc (手工创建这个文件)

    babel 的降级处理配置

    {"presets": ["@babel/preset-env"]
    }
    
  • 在命令行中,运行

    # 把转换的结果输出到指定的文件
    npx babel index.js -o test.js
    # 把转换的结果输出到指定的目录
    npx babel 包含有js的原目录 -d 转换后的新目录
    

发布属于自己的包

规范的包结构

在清楚了包的概念、以及如何下载和使用包之后,接下来,我们深入了解一下包的内部结构。

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

  1. 包必须以单独的目录而存在
  2. 包的顶级目录下要必须包含 package.json 这个包管理配置文件
  3. package.json 中必须包含 nameversionmain 这三个属性,分别代表包的名字、版本号、包的入口。
    • name 包的名字,我们使用 require() 加载模块的时候,使用的就是这个名字
    • version 版本,1.2.18 ,对于一个新的包来说,版本是 1.0.0
    • main 入口文件。默认是 index.js 。如果不是,需要使用main指定

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

https://yarnpkg.com/zh-Hans/docs/package-json

开发属于自己的包

  • 需要实现的功能是(比如把首字母转换成大写、把时间处理成年月日的形式)

  • 初始化包的基本结构

    • 新建 itheima-ucfirst 文件夹,作为包的根目录
    • 在 itheima-ucfirst 文件夹中,新建如下三个文件:
      • package.json (包管理配置文件)
      • index.js (包的入口文件)
      • README.md (包的说明文档)
  • 初始化 package.json

    关于更多 license 许可协议相关的内容,可参考 https://www.jianshu.com/p/86251523e898

  • index.js 中定义功能方法

    编写包的说明文档

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

    README 文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。 我们所创建的这个包的 README.md 文档中,会包含以下 4 项内容:(可以参考其他包的文档,比如multer)

    • 安装方式
    • 导入方式
    • 方法使用说明
    • 开源协议

发布包

  • 注册npm账号

    • 访问 https://www.npmjs.com/ 网站
    • 点击 sign up 按钮,进入注册用户界面
    • 填写账号相关的信息
    • 点击 Create an Account 按钮,注册账号
  • 登录 npm 账号(指的不是页面中登录,而是终端中登录

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

在这里插入图片描述

  • 把包发布到 npm 上

    • 将终端切换到包的根目录
    • 切换镜像源为npm官网(用taobao的镜像源不行)
    • 运行 npm publish 命令,即可将包发布到 npm 上
    • 注意:包名不能雷同
  • 常见错误

    • 没有切换镜像源。要发布到npm上,必须切换镜像源为npm

在这里插入图片描述

- 24小时内不能重复发布

在这里插入图片描述

- 新注册的账号,必须先邮箱(邮件可能是垃圾邮件)验证,然后才能发布

在这里插入图片描述

  • 删除已发布的包

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

    • npm unpublish 命令只能删除 72 小时以内发布的包
    • npm unpublish 删除的包,在 24 小时内不允许重复发布
    • 发布包的时候要慎重,尽量不要往 npm 上发布没有意义的包!

更多关于npm的命令:https://www.npmjs.cn/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue — 第一天(极速入门)

基本介绍 vue是什么 目标:了解vue的一些基础概念。 官方网站: https://cn.vuejs.org/ vue是:渐进式javascript框架。 两组概念 (1)框架 库。只提供一些API给开发者使用。jquery 是一个js库框架。拥有自己的规则和…

python类和实例化

简答介绍类和实例python是面向对象的语言,最主要的就是类和实例,类是抽象的模版创建一个类class Studen(object),class 后接类名,定义的类名大些字母开头,object为类的继承,没有合适的继承类用object类,这是…

pjsip库分析

http://blog.chinaunix.net/space.php?uid287570&doblog&cuid728411 如果你对SIP/VoIP技术感兴趣,哪希望你不要错过:),如果你对写出堪称优美的Code感兴趣,那么你也不可错过:)这期间我想分析一下一个实际的协议栈的设计到实现的相关技术,算是自己的一个学习经历记录.最…

Vue — 第二天(v-model和过滤器)

VUE-02-v-model和过滤器 昨日反馈与回顾 代码仓库的问题 不要修改你克隆下来的仓库中任意代码,否则,下次pull时,可能会报错,从而得到不到最新的代码。 如果已经遇到了这个冲突: 解决冲突(git 中解决冲突)把关键代码…

Count

题目链接&#xff1a;点这里 题目意思&#xff1a;令f(x)表示<x的正整数中与x互质的数的平均数*2&#xff0c;求sigma(f(i)^k),L<i<R Solution: 首先&#xff0c;我们定义\(S(x)\sum_{gcd(a,x)1}a\)&#xff0c;因为gcd(a,x)1&#xff0c;所以对于任意a&#xff0c;满…

牛人iOS开发系列--音频播放、录音、视频播放、拍照、视频录制

概览 随着移动互联网的发展&#xff0c;如今的手机早已不是打电话、发短信那么简单了&#xff0c;播放音乐、视频、录音、拍照等都是很常用的功能。在iOS中对于多媒体的支持是非常强大的&#xff0c;无论是音视频播放、录制&#xff0c;还是对麦克风、摄像头的操作都提供了多套…

Vue — 第三天(计算属性和json-server)

计算属性 使用场景 如果一个结果需要依赖data中的数据&#xff0c;但是需要经过一些逻辑处理&#xff0c;才能得到你想要的数据。此时就可以使用计算属性。 例如&#xff1a;要对给定的字符串做翻转处理之后再来显示。 <div id"app"><!-- 此处逻辑复杂 …

JQuery的ready函数与JS的onload的区别详解

JQuery的ready函数与JS的onload的区别&#xff1a;1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行&#xff0c;不必等到加载完毕。 2.编写个数不同window.onload不能同时编写多个&#xff0c;如果…

Vue — 第四天(components组件)

问题导入 下面的代码是一个折叠面板的效果。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docu…

iOS开发常用的RGB色值和宏

iOS中RGB常用的色值,同时可将对颜色的设置定义成宏,方便开发应用,如: // name 颜色相关 // 参数格式为&#xff1a;0xFFFFFF #define kColorWithRGB(rgbValue) \ [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16)) / 255.0 \ …

防火墙综合实验

防火墙技术综合实验 一、实验目的&#xff1a;本次实验是将多种访问控制列表以及防火墙部分的知识做一个汇总 二、实验内容 A&#xff1a;Established控制列表 拓扑图 配置步骤 1:配置各端口ip地址&#xff0c;配置登陆密码 R4: 登陆账号&#xff1a;ys 密码&#xff1a;123 2:…

iOS获取当前设备型号等信息总结 包含iPhone7和iPhone7P

#include <sys/types.h> #include <sys/sysctl.h>//获得设备型号(NSString *)getCurrentDeviceModel {int mib[2];size_t len;char *machine;mib[0] CTL_HW;mib[1] HW_MACHINE;sysctl(mib, 2, NULL, &len, NULL, 0);machine malloc(len);sysctl(mib, 2, mac…

Vue — 第五天(路由)

前端路由 问题导入 在前面完成的资产管理案例中&#xff0c; 我们是把列表区域和添加表单区域实现在了一个区域。当页面功能比较复杂时&#xff0c;我们需要它们拆分开来&#xff1a;一个页面中只显示一个区域。 一个比较直观的解决方案是把它们分别做成两个独立的网页文件&…

获取网络时间,在不同时间触发事件

<!DOCTYPE html><html lang"en"><head>   <meta charset"UTF-8">   <title>时间事件</title></head><body></body><script> var int_timenew Date();//使用Date获取网络时间;   functi…

iOS获取手机的IP地址

1.添加这五个库&#xff08;在联网的情况下&#xff09; #import <sys/socket.h> #import <sys/sockio.h> #import <sys/ioctl.h> #import <net/if.h> #import <arpa/inet.h>2.写一个方法 - (NSString *)getDeviceIPIpAddresses {int sockfd soc…

Vue — 第六天(vue-cli-介绍)

vue-cli-介绍 vue-cli是官方提供的开发vue项目的脚手架工具。 脚手架是为了保证各施工过程顺利进行而搭设的工作平台。 在开发过程中&#xff0c;脚手架工具是有用的&#xff0c;开发完成&#xff08;项目上线&#xff09;&#xff0c;它就没有用了。 vue-cli可以提供基于vue项…

python安装pyautogui遇到的gbk异常解决

一开始使用pip install pyautogui,报错,大概信息如下: Collecting pygetwindow (from pyautogui) Using cached https://files.pythonhosted.org/packages/01/ed/56d4a369c6e18f6b239d9ef37b3222ba308bfebf949571b2611ff7d64f1d/PyGetWindow-0.0.4.tar.gz ERROR: Complete …

NSString的各种用法总结(创建、截取、判断比较、转化数据类型、拼接、替换、添加、追加、读取、写入、删去、改变)

1、创建字符串1&#xff09;NSSring *str ”adf”;2&#xff09;NSString *str1 [NSString new];NSString *str2 [[NSString alloc] initWithString:”adf”]; &#xff08;等同于1&#xff09;4&#xff09;NSString *str3 [NSString stringWithFormat:”name is %”,”小…

Vue — 第七天(vue-cli-案例)

资料获取地址&#xff1a; github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH&#xff1a; gitgitee.com:wang_yu5201314/VUE_vuecli.git hero案例-项目介绍 功能介绍&#xff1a; 三个模块 英雄列表(只做这个)装备列表技能列表 英雄列表 列表组件删除功能添加组件编…

postman测试工具

做文件上传测试的时候可以选择输入方式为文件 做文件下载测试的时候&#xff0c;可以选择 转载于:https://www.cnblogs.com/thesun/p/10853226.html