Vite来发布npm包

我们在前端开发中经常会安装一些npm包，当你在前端开发有一段时间之后你也会知道，那些npm包实际上就是别人写好的一些代码来供你调用，那么今天就来讲讲如何通过Vite + TS 来发布一个属于自己的npm包

使用Vite建立项目

npm create vite@latest my-npm-demo

// ->vanilla
// ->TypeScript

npm install
git init //可以不用

项目结构

在自动生成的项目中，可以根据自己的需求删除一些无用文件。 实际上一个npm包最重要的东西就是package.json这个文件

demo功能

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"

为TS文件生成类型文件

首先配置vite.config.ts

import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    outDir: 'dist', // 自定义构建输出目录
    target: 'es2020',
    lib: {
      entry: 'src/main.ts', // 入口文件路径
      formats: ['es', 'cjs']
    }
  },
  server: {
    port: 8080, // 自定义开发服务器端口
  },
});

其次新建tsconfig.build.json

// 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

package.json 配置

• name: 包名
• private: 是否私有，私有就不能发到公共平台
• version: 版本号
• type: 文件的默认加载方式，若不填则默认为commonJs。但是无论package.json中的type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理
• types: ts类型文件路径
• main: commonJs的包路径
• module: ESModule的包路径

{
  "name": "my-npm-dem",
  "private": false,
  "version": "0.1.0",
  "type": "module",
  "types": "lib/main.d.ts",
  "main": "dist/my-npm-dem.cjs",
  "module": "dist/my-npm-dem.js",
 }

登录NPM账号并且发布

1、检查npm并切换回npm源

// 查看
npm config get registry
// 设置
npm config set registry https://registry.npmjs.org

// 我是用的nrm管理的使用 nrm use npm
// 如果是没有用源管理的话就直接 npm config set registry https:*//registry.npmjs.org/*

2、登录NPM

// 登陆
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/>.

3、运行发布命令

// 发布！
 npm publish

注意点：

// 私有选项要为false
// 包名必须全网唯一
// 多次发布注意修改版本号