为了深入学习JS我写了一个JS工具库 | 从零到一发布到npm上(1)

简介: 自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法于是就创建了一个名为learnjts的项目,在空余时间也写了几个工具函数,后续还会再继续增加...这篇文章就是一篇实战文章,我把自己创建项目,发布到npm,以及遇到的问题和解决方案全都记录了下来,如果你也想创建一个自己的js工具库,可以根据这篇文章一步一步的尝试一下

创建项目


打开命令窗口,创建一个项目文件

mkdir learnjts  // 创建了一个名为 learnjts 的文件夹
cd learnjts  // 进入此文件夹


image.png


然后初始化项目

npm init

我们可以看到:让我们给项目起一个名字,括号内是默认文件夹的名字,不用修改,回车就可以


image.png


还会弹出来许多的参数,我们可以写上,也可以一路回车,一直到最后,就会生成一个package.json文件夹


image.png


如果要修改可以直接在这里修改

创建一个src文件夹,里面放一些js文件,可以写工具方法,再在根目录下创建一个index.js作为入口文件


image.png


写工具方法


项目骨架已经建好了,接下来我们开始写工具方法

第一个工具方法,我写了一个数据类型的判断方法

先在src文件夹下面建一个getDataType.js

function getDataType(target){
    let type = typeof target
    // 判断是否是复杂数据类型
    if(type === 'object'){
        return Object.prototype.toString.call(target).replace(/^[object (\S+)]$/, '$1').toLowerCase();
    }else{
        // 基础数据类型直接返回
        return type
    }
}
//导出这个方法
export default getDataType


image.png


然后在index.js文件里导入 getDataType方法,并且验证是否能够使用

然后就会发现,报错了


从报错信息我们可以看到是 import出错了

解决方案:给package.js添加一个属性

"type":"module",

此时再运行一下可以看到,能够正常运行了


image.png


以后我们在src目录下肯定会增加很多工具函数,所以可以吧index.js当成一个入口,所有的工具函数都可以从这里导出出去

import getDataType from './src/getDataType.js'
export {
    getDataType,
}


image.png


注册npm账号


要想自己的工具库别人也能够使用,需要把它发到npm上 npm官网

此时就需要注册一个npm账号了

注册npm需要有一个邮箱,任何邮箱都可以,能接收到验证码就可以,注册时会收到验证码


image.png


开始发布


当你注册好npm账号后,你就可以去项目中准备 发布 了


设置npm源


但是在发布之前,需要检查一下npm源,如果是其他源,就会发布失败,此时你需要把它设置为npm源

在项目终端里输入npm config get registry,可以查看当前源

npm config get registry


image.png


可以看到此时我的源是npm源,可以发布,如果是淘宝源呢?

就需要设置npm源

npm config set registry https://registry.npmjs.org/


登录npm账号


因为我们是第一次发布包,所以需要在终端登录我们的npm用户,输入我们的用户名,和密码和邮箱

在终端输入

npm adduser

需要注意的是,我们输入密码时,不会再终端上显示出来,输入完直接按回车就好

接着开始让你输入npm的邮箱号,再次按回车时,会给你的邮箱发一个验证码,你需要把这个验证码再输入上


image.png


发布到npm上


登录好后,开始发布,在终端输入

npm publish

发布的时候,有可能就会报错:提示信息就会问你:你没有登录对账号吧?

其实真正的错误原因:是因为你的项目名称和npm上的项目重名了


image.png


在起名字的时候,你可以去npm上搜一下


image.png


嘿嘿^_^ 这个其实是我之前写好的,只是为了给大家演示,又从零搭建又写了一遍

如果没有搜到,则说明你可以使用这个名字


image.png


如果你重名了,你就在package.js里面改名吧


image.png


此时再次发布,就可以看到,发布成功了


image.png

回到npm,点击自己的头像,再点击Profile,就可以看到自己的npm库了


image.png


目录
相关文章
|
21天前
|
Web App开发 JavaScript 前端开发
JavaScript中的性能优化:代码优化技巧与性能分析工具
【4月更文挑战第22天】本文探讨JavaScript性能优化,包括代码优化技巧和性能分析工具。建议避免全局查找、减少DOM操作、使用事件委托、优化循环和异步编程以提升代码效率。推荐使用Chrome DevTools、Lighthouse和jsPerf等工具进行性能检测和优化。持续学习和实践是提升JavaScript应用性能的关键。
|
3天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
4天前
|
资源调度 JavaScript Linux
nvm, node.js, npm, yarn 安装配置
nvm, node.js, npm, yarn 安装配置
24 1
|
16天前
|
数据可视化 JavaScript 前端开发
【专栏】D3.js 和 Tableau 是两种流行的数据可视化工具
【4月更文挑战第27天】D3.js 和 Tableau 是两种流行的数据可视化工具。D3.js,一个JavaScript库,以其灵活性和定制性著称,适合创建复杂、个性化的可视化效果,但需要编程技能。Tableau,一款用户友好的分析软件,提供直观界面和强大分析功能,适合快速生成常见图表。在选择时,应考虑项目需求、团队技术能力、数据规模和性能要求。两者可单独使用,也可结合发挥各自优点。随着数据可视化需求的增长,这些工具将持续发展并提供更好的解决方案。
|
3天前
|
前端开发 JavaScript 开发者
在JavaScript中,回调函数是一种非常强大的工具
【5月更文挑战第10天】JavaScript中的回调函数是异步编程的核心,常用于处理异步操作结果、事件监听、定时任务、数组遍历和转换以及递归调用。例如,`fetchData`函数使用回调处理网络请求的结果,`addEventListener`用于监听事件,`setTimeout`执行延迟任务,`map`则对数组元素进行操作。尽管回调函数可能导致回调地狱和错误处理复杂,但它们依然是理解和掌握JavaScript的关键技能,而Promise和async/await提供了更优的异步解决方案。
9 2
|
13天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
13天前
|
JavaScript 前端开发 开发者
Node.js的包管理和npm工具深度解析
【4月更文挑战第30天】本文深入解析Node.js的包管理和npm工具。包管理促进代码复用和社区协作,包包含元数据描述文件`package.json`和入口文件。npm提供搜索、安装、发布等功能,通过命令行进行操作,如`install`、`search`、`uninstall`。npm支持版本控制、全局安装、脚本定义及私有仓库。理解和熟练运用npm能提升Node.js开发效率。
|
14天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
14天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
30 0
|
20天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
14 1

推荐镜像

更多