【制作npm包5】npm包制作完整教程，我的第一个npm包

制作npm包目录

本文是系列文章， 作者一个橙子pro，本系列文章大纲如下。转载或者商业修改必须注明文章出处

一、申请npm账号、个人包和组织包区别
二、了解 package.json 相关配置
三、 了解 tsconfig.json 相关配置
四、 api-extractor 学习
五、npm包制作完整教程，我的第一个npm包

本文涉及知识较多，建议认真阅读前面的文章。

认识node_modules

我们打开任意一个项目的node_modules文件夹
在这里插入图片描述
这里.bin是一些可执行文件，npm run xxx之所以能运行，是这里面的bin文件发挥了作用。.cache 是一个缓存文件夹，通常是打包工具为了提高项目再次启动的效率创建的。vite 搭建的项目还可以看到 .vite 文件夹，这个是.vite是它的缓存。有时候在包升级或者降级时，发现并没有更新，可能就是这里的缓存出了问题，删除缓存，重新启动即可。而无需删除整个node_modules文件夹。

找到我们熟悉的vue，看到他的所有文件。
在这里插入图片描述

这个项目包含了dist，是vue官方打包文件
LICENSE是证书文件
README.md是文档说明
package.json 是配置文件

这几个项目通常是一个npm包当中必须存在的一些配置。

点开他的package.json, 如下配置

 "main": "dist/vue.runtime.common.js","module": "dist/vue.runtime.esm.js","name": "vue","typings": "types/index.d.ts", // typings 有时写成 types

可以看得到分别导出了commonjs，es，ts类型这几个配置。当我们在一个项目当中执行import { xxx } from "vue" 的时候，实际上是从package.json文件当中找到他的name这个属性，这里 from “vue”这个vue就是配置文件当中的名字。

制作第一个npm包

在制作包之前，强烈建议将前几部分的文章巩固一下。

初始化package.json配置

这里以制作组织安装包为例，由于普通安装包和组织包在外观上只有包名上的区别。所以学会制作组织包，就等于学会了制作一般的安装包。

  1. 找个合适的文件夹，我这里取名叫做npm-pkg-by-vite。

  2. 在文件夹打开cmd命令行输入npm init --yes
    用 vscode打开当前文件夹，可以看到package.json 文件如下，按如下描述，对这个包进行一定的修改。

{"name": "npm-pkg-by-vite","version": "1.0.0", // 暂且修改为0.0.0"description": "", // 修改为自己合适的描述"main": "index.js", "scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "", // 修改为自己的名字"license": "ISC"
}

  1. 申请一个git仓库，我这里github为例。用途在这篇文章《【制作npm包2】了解 package.json 相关配置》进行了详细描述

  2. 初始化仓库

  • 在cmd输入命令npm init --scope=v3p ，这里的v3p是我申请的组织的名称，这里需要更换成自己申请的名字。
  • package name：首先看到控制台提示@组织/npm-pkg-by-vite的字样，如果需要修改，输入自定义名字就可以了。无需修改，直接回车键。
  • version：版本号提示1.0.0，看心情，我这里直接回车即可
  • description：输入描述，我这里输入我的第一个npm包
  • git repository：git分支，我这里输入https://github.com/vue3plugin/npm-pkg-by-vite
  • author：我这里输入，一个橙子pro
  • license：我这里输入，MIT
  • Is this OK? ：直接回车就行。
    CMD命令窗口提示文字
    再打开package.json文件查看，这里，在main下方加一个type参数
{"name": "@v3p/npm-pkg-by-vite","version": "1.0.0","description": "我的第一个npm包","main": "index.js","type": "module", // 修改为module，我们的目标包文件使用`ts`语法。"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "一个橙子pro","license": "MIT","repository": {"type": "git","url": "git+https://github.com/vue3plugin/npm-pkg-by-vite.git"},"bugs": {"url": "https://github.com/vue3plugin/npm-pkg-by-vite/issues"},"homepage": "https://github.com/vue3plugin/npm-pkg-by-vite#readme"
}
  1. 安装依赖，我这里使用vite这个打包工具，同时插件需要打包.vue的文件。直接上命令

npm i vite vue vue-tsc typescript tslib howtools @vitejs/plugin-vue @types/node @tsconfig/node18 @microsoft/api-extractor -D

配置ts环境

创建tsconfig.json 以及tsconfig.types.json文件。将第章节【制作npm包3】了解 tsconfig.json 相关配置中相关配置复制进去。

配置api-extractor

参照章节【制作npm包4】api-extractor 学习

创建scripts文件夹，创建cleanup.js文件

内容如下

// This file is executed from npm script with project root as cwd.
import fs from 'node:fs'// 这个是我们在tsconfig.types.json设置的输出目录
fs.rmSync('dist/types', { recursive: true }) // 这个操作是把npm-pkg-by-vite.d.ts 换成 index.d.ts 便于package.json通用设置
fs.renameSync('dist/npm-pkg-by-vite.d.ts', 'dist/index.d.ts')

初始化vite配置

创建vite.config.ts，将以下内容复制进去，vite更多配置参照官网。

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue';export default defineConfig({build: {lib: {entry: "./src/index.ts", // 入口文件fileName: (format) => `index.${format}.js`,formats: ['es', "cjs"], // 打包同时支持`es`和`commonjs`},rollupOptions: {external: ['vue'], // 这里表示不进行打包的文件},cssCodeSplit: false, // css 文件不分割outDir: "dist", // 打包输出目录minify: "esbuild", // 压缩模式},plugins: [vue(), // 支持`.vue`文件]
})

项目相关文件创建

  1. 创建src文件夹并创建index.ts文件，随意写入文件内容即可。创建demo文件夹，写一个简单的vue项目即可。
  2. package.json文件 scripts设置如下
"scripts": {"dev:demo": "cd example && vite", // 运行demo"build:demo": "cd example && vite build", // 创建demo"build": "vite build", // 库打包// 打包类型文件，vue-tsc 相当于 ts的 `tsc`命令，效果相同"build-types": "vue-tsc -p ./tsconfig.types.json && api-extractor run -c api-extractor.json && node scripts/cleanup.js", // 打包库文件和类型文件"build-all": "npm run build && npm run build-types" },

执行npm run build-all，dist目录输出文件。

项目发布

一个完整的npm包至少包含，main入口文件配置，dist打包的文件包，README.md文件。这样才能保证我们的项目发布到npm之后可以被正常使用。

这个时候，用到前边章节的内容。在package.json文件当中增加files配置。

"files": ["dist"],

表示只有dist文件夹上传到npm，其他的会忽略。这里不必担心的是，我们的开源证书、README.md文件、package.json 文件不会因为这个设置，而不进行上传。这个也是合理的，毕竟这些文件都是npm包必须的文件。

由于经过上述打包之后，我们生成了commonjs、es、ts类型这几类文件，可以像vue项目那样进行配置。

除了这几个配置，还好细细说下exports这个配置。这个在前面章节有提及，还有一些细节需要在这里进行补充。有时我们打包之后的文件是需要分模块导出的，而不是全部直接导出。这里举个例子：

https://www.npmjs.com/package/howuse?activeTab=code
在这里插入图片描述
在这个文件夹当中看到很多的子包，从名称来看，每个子包都有自己的依赖，如果从index.js直接导出，未免这个包会很重。如果只想使用pdf这个包，无缘无故的把其他的项目也会打包到我们项目当中，对treeshaking优化十分不利。

它的package.json 文件是这样配置的

 "exports": {"./axios": {"import": "./axios/axios.es.js","require": "./axios/axios.cjs.js","types": "./axios/index.d.ts"},"./echarts": {"import": "./echarts/echarts.es.js","require": "./echarts/echarts.cjs.js","types": "./echarts/index.d.ts"},// ... },

那么在使用的时候，可以这样使用了import { xx } from 'howuse/echarts'或者require('howuse/echarts')，项目名加上子路径的名称，就可以直接识别到项目下面的文件目录了。这样以来，就比上边main、module、typings这种散装的配置灵活不少。

【完结】

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

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

相关文章

MySQL的配置文件my.cnf与my.ini

MySQL的配置文件my.cnf与my.ini

一、my.cnf与my.ini win系统，MySQL配置文件为my.ini 其他系统（Ubuntu、CentOS、macOS)MySQL配置文件为my.cnf 二、my.cnf与my.ini的路径 2.1 默认路径 MySQL 的配置文件 my.cnf 可能位于多个位置，具体取决于安装方式和操作系统。以下是一…
阅读更多...
2023年国赛数学建模思路 - 案例：最短时间生产计划安排

2023年国赛数学建模思路 - 案例：最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 （赛题出来以后第一时间在CSDN分享） https://blog.csdn.net/dc_sinor?typeblog 最短时…
阅读更多...
Kotlin开发笔记：使用委托进行拓展

Kotlin开发笔记：使用委托进行拓展

Kotlin开发笔记：使用委托进行拓展 导言 在OO语言(面向对象)中，我们经常会用到委托或者代理的思想。委托和代理在乍一看很相似，其实其各有各的侧重点，这里我引用ChatGpt的回答： 委托（Delegation&#xff09…
阅读更多...
在C中使用Socket实现多线程异步TCP消息发送

在C中使用Socket实现多线程异步TCP消息发送

目录 基础知识开始实现主要函数说明结束语 在本篇文章中，我们会探讨如何在C语言中使用socket来实现多线程，异步发送TCP消息的系统。虽然C标准库并没有原生支持异步和多线程编程，但是我们可以结合使用POSIX线程（pthread&#xff09…
阅读更多...
Java解决四大查找(一)

Java解决四大查找(一)

Java解决四大查找 一.线性查找1.1 题目1.2 思路分析1.3 代码演示 二.二分查找(双指针法)2.1 题目2.2 思路分析(图解加文字)2.3 代码演示 一.线性查找 1.1 题目 在数组{1，8，1024，521，1889}中查找数字8，如果有&#xff…
阅读更多...
地址解析协议-ARP

地址解析协议-ARP

ARP协议 无论网络层使用何种协议，在实际网络的链路上传输数据帧时，最终必须使用硬件地址 地址解析协议（Address Resolution Protocol，ARP）：完成IP地址到MAC地址的映射，每个主机都有一个ARP高速缓…
阅读更多...
【数据结构】二叉树篇| 纲领思路02+刷题

【数据结构】二叉树篇| 纲领思路02+刷题

博主简介：努力学习的22级计算机科学与技术本科生一枚🌸博主主页： 是瑶瑶子啦每日一言🌼: 所谓自由，不是随心所欲，而是自我主宰。——康德 目录 一、前言二、刷题1、翻转二叉树 2、二叉树的层序遍历✨3、 二…
阅读更多...
线性代数再回顾

线性代数再回顾

最近，在深度学习线性代数，之前大一的时候学过线性代数，但那纯属于是应试用的，考试一考完，啥都忘了，也说出不出个所以然，所以，在B站的MIT的线性代数以及3blue1brown线性代数的本质中去…
阅读更多...
git命令使用

git命令使用

君子拙于不知己,而信于知己。——司马迁 清屏：clear 查看当前面板的路径：pwd 查看当前面板的文件：ls 创建文件夹：mkdir 文件夹名 创建文件：touch 文件名 删除文件夹：rm -rf 文件夹名 删除文件：r…
阅读更多...
Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现

Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现

Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现 注1：本文系“无线感知论文速递”系列之一，致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; MobiCom, Sigcom, MobiSys, NSDI…
阅读更多...
爬虫IP时效问题：优化爬虫IP使用效果实用技巧

爬虫IP时效问题：优化爬虫IP使用效果实用技巧

目录 1. 使用稳定的代理IP服务提供商： 2. 定期检测代理IP的可用性： 3. 配置合理的代理IP切换策略： 4. 使用代理IP池： 5. 考虑代理IP的地理位置和速度： 6. 设置合理的请求间隔和并发量： 总结 在爬虫过…
阅读更多...
python知识：什么是字符编码？

python知识：什么是字符编码？

前言 嗨喽，大家好呀~这里是爱看美女的茜茜呐 我们的MySQL使用latin1的默认字符集， 也就是说，对汉字字段直接使用GBK内码的编码进行存储， 当需要对一些有汉字的字段进行拼音排序时（特别涉及到类似于名字这样的字段时…
阅读更多...
Docker网络与资源控制

Docker网络与资源控制

一、Docker 网络实现原理 Docker使用Linux桥接，在宿主机虚拟一个Docker容器网桥(docker0)，Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址，称为Container-IP，同时Docker网桥是每个容器的默认网关。因为在同一宿…
阅读更多...
Oracle外部表ORACLE_LOADER方式加载数据

Oracle外部表ORACLE_LOADER方式加载数据

当数据源为文本或其它csv文件时，oracle可通过使用外部表加载数据方式，不需要导入可直接查询文件内的数据。 1、如下有一个文件名为：test1.txt 的数据文件。数据文件内容为： 2、使用sys授权hr用户可读写 DATA_PUMP_DIR 目录权限&a…
阅读更多...
探索未来：元宇宙与Web3的无限可能

探索未来：元宇宙与Web3的无限可能

随着科技的奇迹般发展，互联网已经成为了我们生活的不可分割的一部分。然而，尽管它的便利性和普及性带来了巨大的影响，但我们仍然面临着传统互联网体验的诸多限制。 购物需要不断在实体店与电商平台间切换，教育依然受制于时间与地…
阅读更多...
Unity如何把游戏导出成手机安装包

Unity如何把游戏导出成手机安装包

文章目录 前言使用环境步骤添加场景构建APK 前言 本文章主要演示了，如何将制作好的游戏，导出成APK，安装到手机上。 使用环境 Unity2022。 步骤 首先打开你的项目，然后选择菜单栏的“File” > “Build Settings…”&#xf…
阅读更多...
QMainwindow窗口

QMainwindow窗口

QMainwindow窗口 菜单栏在二级菜单中输入中文的方法给菜单栏添加相应的动作使用QMenu类的API方法添加菜单项分隔符也是QAction类 工具栏添加工具栏在状态栏中添加控件工具栏添加其他类型的工具工具栏的属性添加多个工具栏使用窗口添加使用代码添加 状态栏常用API在状态栏显示信…
阅读更多...
NeuralNLP-NeuralClassifier的使用记录（一），训练预测自己的【英文文本多分类】

NeuralNLP-NeuralClassifier的使用记录（一），训练预测自己的【英文文本多分类】

NeuralNLP-NeuralClassifier的使用记录，训练预测自己的英文文本多分类 NeuralNLP-NeuralClassifier是腾讯开发的一个多层多分类应用工具，支持的任务包括，文本分类中的二分类、多分类、多标签，以及层次多标签分类。支持的文本编码…
阅读更多...
C语言库函数之 qsort 讲解、使用及模拟实现

C语言库函数之 qsort 讲解、使用及模拟实现

引入 我们在学习排序的时候&#xff0c;第一个接触到的应该都是冒泡排序&#xff0c;我们先来复习一下冒泡排序的代码&#xff0c;来作为一个铺垫和引入。 代码如下&#xff1a; #include<stdio.h>void bubble_sort(int *arr, int sz) {int i 0;for (i 0; i < sz…
阅读更多...
面试热题（最大子数组和）

面试热题（最大子数组和）

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#xff1a;6 解释&#xff1a;连续…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023