如何创建自己的npm包，并进行本地验证

如何创建自己的npm包，并进行本地验证

前言

在我们日常的开发过程中，我们会对一个项目中需要重复用到的代码进行封装，那么对于通用的工具库，我们通常会封装成一个npm packpage以达到在不同项目中复用的目的。下面的内容将会介绍：

1. 如何封装属于我们自己的npm包
2. 打包过后的代码如何在本地其他项目里面实时验证
3. 如何解决项目不通过npm包安装库，而是直接下载代码到项目中，出现的类型检测报错问题
4. 最终的目录结构以及完整的关键配置文件

初始化项目

1. 创建一个文件夹，并将文件夹的名字修改为你的npm库名（文件夹名字和库名一致此处以test为例）
2. 在vscode中打开该文件夹，如何在vscode的控制台里面执行下面的代码，初始化package.json

npm init -y

3. 安装vite为开发依赖（此案例安装的vite版本为5.4.11，最新的6.0版本会有问题，具体原因未排查）

npm i vite -D
// 安装指定版本
npm i vite@5.4.11 -D

4. 根目录下创建一个src文件夹，在src文件夹里创建一个ts文件，文件内容如下（此处以test.ts为例，文件内容仅作为演示，可以随意书写）

export class buildExample{
   
   
    constructor(){
   
   
    }
    add(x: number, y: number): number {
   
   
        return x + y;
    }
    sub(x: number, y: number): number {
   
   
        return x - y;
    }
}

5. 在根目录下创建vite.config.js,配置内容如下

 import {
   
    resolve } from 'path'
import {
   
    defineConfig } from 'vite'

// vite默认会打包出umd和es模块化两种导出方式的文件，以下配置会打包出两份结果：
export default defineConfig({
   
   
  build: {
   
   
    lib: {
   
   
      entry: resolve(__dirname, './src/test.ts'),
      name: 'test',
      // 构建好的文件名（不包括文件后缀）
      fileName: 'test',
    },
    rollupOptions: {
   
   
      output: {
   
   
        // 在 UMD 构建模式下,全局模式下为这些外部化的依赖提供一个全局变量
        globals: {
   
   
            test: 'test',
        },
      },
    },
  },
})

打包代码

• 在package.json的scripe里面添加指令

  "scripts": {
   
   
    "build": "vite build"
  },

• 在控制台执行指令，打包代码。

npm run build

3.执行以上命令后，构建结果会输出到dist目录，默认有两个js文件，功能一致，语法规范不一致

• .umd.js：umd导出方式，兼容amd commenjs等导出的库实现。
• .mjs：es模块化导出方式的库实现。

自动生成dts声明文件

配置好vite.config.js后，就可以构建了。但是如果是使用ts开发库，则需要配置自动生成dts声明文件。下面我们使用vite插件，执行vite命令时，会一并生成声明文件。如vite-plugin-dts插件。

• 首先安装插件 ，由于我们只是开发过程中需要用到这个插件，所以加上-D

npm i vite-plugin-dts -D

• 修改vite.config.js，在vite中引入该插件，并注册

// vite.config.js
import dts from 'vite-plugin-dts'
​
export default defineConfig({
   
   
 // ...其它配置
 plugins: [dts()],
}