我们在前端开发中经常会安装一些npm包,当你在前端开发有一段时间之后你也会知道,那些npm包实际上就是别人写好的一些代码来供你调用,那么今天就来讲讲如何通过Vite + TS 来发布一个属于自己的npm包。
npm create vite [project-name]→ vanilla
npm install # 可有可无 git init项目结构
当然package.json这个文件是最重要的,我们按照流程放到后面来讲!
/** * 堆代码 duidaima.com * 判断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包了,但是没有发到平台上。
export default defineConfig({ build: { outDir: 'dist', // 自定义构建输出目录 target: 'es2020', lib: { entry: 'src/main.ts', // 入口文件路径 formats: ['es', 'cjs'] } }, server: { port: 8080, // 自定义开发服务器端口 }, });其次新建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 "scripts": { "dev": "vite", "build": "vite build && tsc -p tsconfig.build.json", // 修改成这样 "preview": "vite preview" },完成后运行命令npm run build
{ "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: 包名
到这里就是一个基础的配置,了解这些就能解决首次发布的基本问题。
// 控制台会提示输入相关信息 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/>. ```3.运行发布命令
// 发布! npm publish注意点:
npm install [packageName]@latest