通过Vite来发布自己的第一个npm包(手把手版)
前言
我们在前端开发中经常会安装一些npm包,当你在前端开发有一段时间之后你也会知道,那些npm包实际上就是别人写好的一些代码来供你调用,那么今天就来讲讲如何通过Vite + TS 来发布一个属于自己的npm包
使用Vite建立项目
安装Vite
在你想要建立的项目的文件下使用
npm create vite [project-name]
→ vanilla
→ TypeScript
到这里项目就建立好了,进入项目之后输入
npm install
# 可有可无
git init
项目结构
在自动生成的项目中,可以根据自己的需求删除一些无用文件。
实际上一个npm包最重要的东西就是package.json
这个文件
| 💡 一个 NPM 模块 只 需要包含一个带有 name 和 version 属性的 package.json
文件。
当然package.json
这个文件是最重要的,我们按照流程放到后面来讲!
写一些简单的方法作为内容
比如在utils.ts
文件中写一个类型判断函数
/**
* 判断7种基本类型和对象、数组类型,返回类型名字符串
* @param value
* @returns 类型名
*/
export function getType(value:unknown): string {
const type: string = typeof value;
if(type === 'object') {
if(value instanceof Array){
return 'Array';
}else if(value instanceof Object){
return 'Object';
}else if(value === null){
return 'null';
}
}
return type;
}
然后把这些统一在main.ts
中导出
import { getType } from "./utils"
export { getType }
//或者直接
export { getType } from "./utils"
好的,到这里的时候你已经有了一个npm包了,但是没有发到平台上。
为TS文件生成类型文件
如果你是使用的JS,那么可以直接跳过这步,如果你使用的是TS那你一定要看下去,不要再傻傻的手写了!
首先配置vite.config.ts
首先需要在vite.config.ts
中进行一些基础的build所需配置
export default defineConfig({
build: {
outDir: 'dist', // 自定义构建输出目录
target: 'es2020',
lib: {
entry: 'src/main.ts', // 入口文件路径
formats: ['es', 'cjs']
}
},
server: {
port: 8080, // 自定义开发服务器端口
},
});
其次新建tsconfig.build.json
其次是重点的部分,我们需要在根目录下新建一个tsconfig.build.ts
来自动的生成类型文件
// tsconfig.build.json
{
"extends": "./tsconfig.json", // 拓展 tsconfig.json 的配置
"compilerOptions": {
"noEmit": false, // 允许生成文件
"declaration": true, // 需要设置为 true 来支持类型
"emitDeclarationOnly": true, // 只生成类型文件
"declarationDir": "lib" // 类型文件的导出目录
},
"include": ["src"] // 编译目标仅为 src 文件夹下的文件
}
最后配置一下build
最后在我们的package.json
中修改一下我们的build
设置,以便在每次build的时候都能够生成对应的类型文件在lib文件夹下
// package.json
"scripts": {
"dev": "vite",
"build": "vite build && tsc -p tsconfig.build.json", // 修改成这样
"preview": "vite preview"
},
完成后运行命令npm run build
package.json 配置
script和依赖的配置大家都知道是什么,就不在这边阐述了。
{
"name": "utils-first-npm-package",
"private": false,
"version": "0.1.0",
"type": "module",
"types": "lib/main.d.ts",
"main": "dist/utils-first-npm-package.cjs",
"module": "dist/utils-first-npm-package.js",
}
- name: 包名
- private: 是否私有,私有就不能发到公共平台
- version: 版本号
- type: 文件的默认加载方式,若不填则默认为commonJs。但是无论
package.json
中的type
字段为何值,.mjs
的文件都按照es模块来处理,.cjs
的文件都按照commonJs模块来处理 - types: ts类型文件路径
- main: commonJs的包路径
- module: ESModule的包路径
到这里就是一个基础的配置,了解这些就能解决首次发布的基本问题。
登录NPM账号并且发布
这边是默认已经拥有了NPM账号的,如果没有的话移步官网 www.npmjs.com/ 注册并创建 npm 账号。
-
检查npm并切换回npm源
我是用的
nrm
管理的使用nrm use npm
如果是没有用源管理的话就直接
npm config set registry https:*//registry.npmjs.org/*
-
登录NPM ```Bash // 登陆 npm login
// 控制台会提示输入相关信息 Log in on <https://registry.npmjs.org/> Username: // 用户名 Password: // 密码 Email: (this IS public) // 邮箱 Enter one-time password: // 一般是邮箱内查收 Logged in as xxx on <https://registry.npmjs.org/>. ```
-
运行发布命令
// 发布! npm publish
注意点:
- 私有选项要为
false
- 包名必须全网唯一
- 多次发布注意修改版本号
在NPM官网上查看
在自己的空间里就可以查看到
在另外的项目里安装引用
这个不用多说了,能发NPM包的都会用吧~
npm install [packageName]@latest
转载自:https://juejin.cn/post/7257716027212087333