开发NPM三方库的必备知识

已于 2024-08-07 14:51:50 修改
阅读量1.2k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： ReactNative 文章标签： npm javascript typescript
于 2022-11-15 20:48:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xx326664162/article/details/127863014
本文详细介绍了创建并发布npm第三方库的全过程，包括使用TypeScript编译、webpack打包、设置gitignore与npmignore文件、调试方法以及发布npm包的步骤。重点讨论了如何确保库能在JavaScript和TypeScript项目中兼容，以及本地调试第三方库的多种方法，如yalc、npm link和直接引用本地路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在做一个第三方npm库，在本地调试，打包，发布阶段，深入了解了一下，不少参数的配置、工具的使用，这里总结记录一下

文章目录

一、编译

这一步是为提供不同的使用方式，例如：ts写的代码，发布后可供ts和js使用，或者 通过标签<script src="..."></script>引入

编译TypeScript

使用 tsc CLI 工具，我们可以将一个TypeScript文件编译成某一个指定版本的ECMA Script文件。

JavaScript这种无类型语言，最容易产生bug，所以TypeScript诞生了。浏览器引擎和Node.js都能够直接运行JavaScript，但无法直接运行TypeScript。 于是就有了tsc命令行，用于把TypeScript编译为JavaScript（准确来说是ECSA Script，不过不同的环境对ECMA的各个版本兼容性又不太一样，往往还需要借助某些工具如babel 进一步编译成兼容各种浏览器环境的代码）

可以通过 tsc 命令直接传入参数，也可以通过 tsconfig.json来设置参数

tsconfig.json 配置

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端从零到一开发自己组件库并发布到npm
zyf_baby的博客
01-24 1836
好多前端小伙伴干了五六年，一直在做切图仔，一看项目没啥亮点。今天开始，我就分享下自己开发组件库的历程。
Harmony鸿蒙应用开发：常用命令-ohpm convert
DMZDAMS的博客
06-26 859
将npm格式三方库转换为ohpm三方库。
微信小程序使用npm安装第三方库
跟派大星学编程
05-09 7410
我们以安装有赞的 vant库做例子 1. 初始化 在小程序根目录中（miniprogram）执行 npm init 输入一些基本的信息，可以一直回车，按默认就可以，然后会生成一个package.json文件 2. 安装第三方库 有赞文档地址：https://youzan.github.io/vant-weapp/#/intro 执行 npm i vant-weapp -S --productio...
包管理器npm：安装和使用第三方库
最新发布
m0_75220683的博客
06-26 804
npm是Node.js的包管理工具，相当于"应用商店"，可下载和管理100多万个工具包。它能自动解决依赖关系、管理版本，并通过package.json文件记录项目配置。摘要介绍了npm的核心功能：安装包（npm install）、创建package.json（npm init）、管理依赖项，并通过lodash、moment、chalk等常用包展示了具体用法。最后以一个命令行待办事项应用为例，演示如何结合多个第三方包开发项目。npm极大提高了Node.js开发效率，让开发者能专注于业务逻辑而非重复造轮子。
npm 库
qq_25194685的博客
10-05 238
nodemailer 邮件发送 moment 时间处理
【vue】从零开发组件库并发布npm
Mr.J的博客
04-06 2157
前言 在工作中，我们经常使用element-ui、iview等一系列组件库。 久而久之，我自己也在想可不可以开发一个属于自己的组件库，并且到时候直接npm install xxx 之后就可以直接安装引入使用。 本文旨在分享前端萌新自己的vue组件的搭建和发布到npm上的流程。如有错误，请大佬们指出，一起交流。 vue项目初始化 1. 创建vue项目 vue create project-name 2. 将项目目录修改成以下结构（参考了iview的目录结构） |-- project-name |
从零开始：构建、打包并上传个人前端组件库至私有npm仓库的完整指南
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
04-15 5520
确定组件库的需求和功能：在开始构建组件库之前，你需要明确你的组件库需要包含哪些组件，以及这些组件应该具备哪些功能。这有助于你更好地规划你的开发工作。 编写组件代码：使用你熟悉的前端框架（如React、Vue等）编写组件代码。确保你的代码具有良好的可读性和可维护性，并遵循相关的编码规范。 创建组件库的结构：为了组织和管理你的组件，你需要创建一个清晰的目录结构。这可以包括组件的源代码、样式文件、文档和示例等。 编写文档和示例：为你的组件编写清晰的文档和示例，这有助于其他开发者理解和使用你的组件库。
OpenHarmony开发实战手册：应用开机自启原理
2401_84917132的博客
08-23 1297
整个实现原理就是专门弄个应用当启动器，让这个应用进行开机自启（此处的开机自启并不是直接打开应用，而是自启一个服务挂在后台运行），然后让这个应用去打开需要自启的那个应用
HarmonyOS实战开发：Stage模型下的ArkTS工程目录结构
2401_84917132的博客
08-27 1283
开发效率：声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。
【TypeScript】增强类型系统的必备方式
吉帅振博客
08-19 610
在 TypeScript 中预留了一个增强类型的口子，使得我们可以方便地扩展原来的类型系统，以兼容 JavaScript 的代码。增强类型系统，顾名思义就是对 TypeScript 类型系统的增强。在 npm 中，有很多历史悠久的库都是使用 JavaScript 编写的，而 TypeScript 作为 JavaScript 的超集，设计目标之一就是能在 TypeScript 中安全、方便地使用 JavaScript 库。
开发你的一个npm 组件
sinat_36539161的博客
03-08 1171
这里写自定义目录标题创建npm包1、创建npm包2、注册npm账号3、添加账号：进入npm包目录，命令行输入4、发布5、使用npm 包 创建npm包 1、创建npm包 包名 kitex，目录下有： highway.js function measureSpeed(speed){ if(speed > 120) { console.log(“You are speeding. Please slow down”) } else if (speed < 60){ console.log(“For
npm安装第三方包
weixin_30649641的博客
01-12 570
npm安装第三方包 到项目目录下打开命令行 安装jQuery: npm install jquery --save 安装bootstrap: npm install bootstrap --save 转载于:https://www.cnblogs.com/tutumissed/p/8276214.html...
如何打造自己的npm库
weixin_34037977的博客
03-02 493
准备工作 node与npm肯定是要有的，这些略过不谈 操作流程 代码规范 首先去github新建一个仓库，然后clone到本地，我们的主要工作环境就在这里啦~ 然后去npm注册一个账号。传送门 注册好之后我们输入npm login进行登录操作，一定要记得在之前验证邮箱，否则后面无法发布。 这里是我们的源代码，与之前不同的是，我们需要做一些处理。 (function (global, name,...
认识npm和第三方库
yizhiyang
12-01 1731
认识npm和第三方库的使用
vue3.2从0-1封装一个组件库 （ 组件项目的创建 - 发布npm - 使用组件库 ）
weixin_43845137的博客
10-11 1861
vue3.2从0-1封装一个组件库 （ 组件项目的创建 - 发布npm - 使用组件库 ）
npm 常用的库
qq_25194685的博客
10-14 2975
库名 作用 nodemailer 邮件发送 moment 时间处理 svg-captcha 验证码生成库 saslprep mongodb 密码保护库 mongoose 数据库客户端 redis node 链接 i18n 前端国际化的语言包 koa-static 静态文件的展示 uuid 生成uuid koa-jwt koa 鉴权工具，保护api路径 jsonwebtoken 生成token，验证token npm-run-all 并行或者串行运行...
【实操】2023年npm组件库的创建发布流程
happy921212的博客
08-11 1769
2022年的实践为基础，2023年我再建一个组件库【ZUI】。
npm常用类库
输入技术、输出想法
07-16 371
npm常用类库 可以在官网直接搜索 类库 简介 npm命令 axios 基于浏览器和Node.js的基于HTTP客户端 npm i axios vue-router vue前端路由 npm i vue-router vuex vue状态管理 npm i vuex qrcode 二维码生成 npm i qrcode qs get url 转化成参数 npm i qs serve 快速搭建静态站点 npm i serve 指定端口:serve -l 8100 uu
Vue组件化开发(npm安装使用)
YUMIAloogy的博客~
06-06 1195
Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。本文主要介绍了npm的下载和vue项目的基本架构
Python前端开发库 pulp_npm-client 发布新版
资源摘要信息:"Python库 | pulp_npm-client-0.1.0a4.dev***.tar.gz" 1. 资源分类与所属语言 该资源分类为Python库，即表示这是一个专为Python编程语言所设计的软件包。根据描述，资源全名为pulp_npm-client-0.1.0a4...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薛瑄

文章不错，请博主吃包辣条

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值