本文正在参加「金石计划」

前言

开发久了难免就想自己造轮子了，当然现在轮子这么多，不一定要自己造了，但是还是那就老话，你可以不做，但不能不会，今天就带大家从0到1，使用 Vite 发布一个属于自己的 npm 包

流程

先简单介绍一下发包的流程，其实不管你是用webpack也好，vite或者其他打包工具，甚至是不用打包工具，都是可以去发 npm 包的

那么发包的核心是什么？—— package.json

所谓发包，就是把 package.json（描述了包的作用，入口文件等包信息） 以及配置文件里所指定的需要上传的文件发布到 npm 的过程，我们称作发包

下面我就按照从创建仓库，到发包，一步一步带大家把流程走一遍

创建空项目

这里我使用的是 Vite 来创建项目，你也可以直接使用 npm init 来创建 package.json 文件

npm create vite ly-plugins

选项我使用了Vanilla（这玩意就是原生哈哈～） + TS 来开发插件，然后，我们就得到了一个干净的目录

这里先预览下我们最终的目录长啥样

实际上需要我们关注的只有3部分，plugins，vite.config.ts 和 package.json

调整项目配置

这里分三部分分别讲解

组件源码

以 plugins 为例子，个人习惯上会在 src 目录下新建目录，创建index入口文件，然后写好组件 export 导出，

也就是我们想要发布到 npm 的代码源码

打包配置

我们发布到 npm 上的包需要做一步打包编译，转成兼容node或者浏览器的代码，当然

，你想要直接发布源码上去也可以，只是不推荐，看你的实际需要

新建 vite.config.ts 文件

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
​
export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'src/plugins/index.ts'),
      name: 'lyPlugins',
      // the proper extensions will be added
      fileName: 'ly-plugins'
    }
    // rollupOptions: {
    //   // 确保外部化处理那些你不想打包进库的依赖
    //   external: ['vue'],
    //   output: {
    //     // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
    //     globals: {
    //       vue: 'Vue',
    //     },
    //   },
    // },
  }
})
​

这里关注的是 lib 里边的配置，它用来设置我们打包 build 出来的一些文件

• entry 文件入口（重要）

我们想要打包的文件是 src/plugins/index.ts 那就把该路径填上

• 下面的 name 和 fileName 根据需要修改，一般用 index 或和插件名一致即可
• 尝试打包

npm run build

这时打包出来的文件就是我们接下来要上传到 npm 服务的文件了

这里简单提下打包名称里有 umd 是啥意思

Javascript 的模块化从前后端区分的话有两大类：

1、commonJS 也就是服务端 node 的模块化标准 （require / module.export）

2、客户端的标准则有 amd / umd / es Module 等

• amd 使用（require / define）
• umd 是一种同时兼容node和浏览器的标准
• Es Module 是ES6 的模块化标准（export / import）

这里我使用 umd 标准

发包配置

到这里就是发包前的最后一步了，我们根据需要来调整 package.json 文件

这里主要需要注意两个配置（重要）：

• Name: 包名，这个没啥好说的，不要重复就好
• Main ：入口文件，影响发包后的文件导入
• Files : 需要上传的文件，一般是 dist 目录下的文件，也可根据需要配置

其他：

像 description,repository,bugs,keywords这些属性看需要配置，如果你是想做一个便利大家使用的开源，建议越完善越好

参考配置：

{
  "name": "ly-plugins",
  "private": false,
  "version": "0.0.6",
  "author": "jyliyue",
  "description": "common plugins",
  "keywords": [
    "javascript",
    "plugins"
  ],
  "type": "module",
  "main": "dist/ly-plugins.umd.cjs",
  "files": [
    "dist/*"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/jiangliyue/ly-plugins"
  },
  "bugs": {
    "url": "https://gitee.com/jiangliyue/ly-plugins/issues",
    "email": "772748611@qq.com"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "format": "prettier --write --parser typescript "(src|test|packages|types)/**/*.ts""
  },
  "devDependencies": {
    "prettier": "^2.8.7",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}
​

npm 发布流程

项目弄好之后就是发布 npm 包了

• 根据需要设置 registry 源，也许企业有需要发布私有包的需求

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

• 登录 npm ( 如果已登陆可以忽略这一步 )

npm login

根据提示输入帐号密码即可

• 发布到 npm

npm publish

发布成功！

可以到 npm 网站上查看 www.npmjs.com/package/ly-…

使用 npm 包

最后的使用就和我们平时安装其他 npm 包一样了， npm install XX 后在项目中 import 就可以正常使用了

项目仓库

懒的同学也可以使用下面的仓库模板改一改就可以，选择 main 分支

jiangliyue/ly-plugins (gitee.com)