从零到一：发布您的第一个NPM前端依赖包

目录

准备

1.创建一个vite项目

2.配置vite.config.ts

2.配置package.json

3.创建依赖包

index.ts

index.d.ts

4.发布

1.创建npm账号，如果有请忽略

2.在终端输入npm log进行登录

3.npm publish 发布就ok了

5.常见问题

1.You must sign up for private packages

2.提示RPC

3.其他问题

---

准备

上传到npm上需要将镜像源设置为npm官方源，也可以在项目中添加.npmrc文件如下图

设置该项目的npm源方便些

1.创建一个vite项目

可以看vite官方文档的命令

2.配置vite.config.ts

配置打包的基本配置

export default defineConfig({
  plugins: [vue()],
  base:'./',
  build:{
    target: 'modules',
    outDir:'dist',
    minify: true,
    lib: {
      entry: resolve(__dirname, 'lib/index.ts'),
      name: 'zztool',
      formats: ["es", "umd", "cjs"],
      // the proper extensions will be added
      fileName: 'zztool',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
    },
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
      format:{
        comments:false
      }
    },

  }
})

2.配置package.json

注意上传到npm一定把"dependencies"和"devDependencies"清空如果你的依赖包有依赖其他的包可以不用管，如果"dependencies"有依赖包，下载时也会一并下载

package.json中有不知道的字段可以自行查阅

{
  "name": "@zzcpt/zztool",
  "private": false,
  "version": "1.1.0",
  "type": "module",
  "main": "./lib/index.js",
  "module": "./dist/zztool.umd.cjs",
  "typings": "./lib/index.d.ts",
  "license":"MIT",
  "files": [
    "dist",
    "lib"
  ],
  "keywords": ["zztool","utils"],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Czhangzihao/zztool"
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
  },
  "devDependencies": {
  }
}

3.创建依赖包

在项目根目录下创建文件夹我创建的是lib，创建不一样的记得修改vite.config.ts中的entry中的路径位置信息，创建完成后就可以创建一个index.ts文件中写入你想写入的代码，因为ts文件引入的时需要类型说明所有需要在创建一个index.d.ts文件进行类型说明

index.ts

/**
 * 两数相加
 * @param {*} a
 * @param {*} b
 * @returns
 */
fuction add(a:number,b:number):number{
    return a + b;
}

index.d.ts

declare function add(a: number, b: number): number;
export default add;

完成了一个简单的依赖包

4.发布

1.创建npm账号，如果有请忽略

2.在终端输入npm log进行登录

3.npm publish 发布就ok了

5.常见问题

在发布时遇到的问题

1.You must sign up for private packages

使用 npm publish --access public 发布

2.提示RPC

使用 git config --global http.postBuffer 524288000 设置缓存

3.其他问题

可以自行百度基本都能解决