前言

我们在前端开发中经常会安装一些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 账号。

1. 检查npm并切换回npm源

   我是用的nrm管理的使用 nrm use npm

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

2. 登录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/>.
   ```
   

3. 运行发布命令

    // 发布！
    npm publish
   

注意点：

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

在NPM官网上查看

在自己的空间里就可以查看到

在另外的项目里安装引用

这个不用多说了，能发NPM包的都会用吧~

npm install [packageName]@latest