发布npm

# 一、创建vue项目

这里我使用脚手架搭建，原因：不用自己一个个引入组件库，节省了配置文件的时间。

在components下Dialog.vue和index.js

Dialog.vue：定义组件

index.js：将组件注册为全局组件
```
	|--components
	|--Dialog.vue
	|--index.js
```
1
2
3

# 二、添加组件结构样式

一般做项目UI组件是复用率最高的，所以为了减少copy次数，组件功能尽量完整。

结构大致分为：背景、主体、主体头、主体内容、主体底
样式看具体需求

# 三、注册全局组件

如果想在vue中注册全局组件，就需要使用vue.use()，需要在调用 new Vue() 之前使用。

在index.js中引入组件，并注册组件(Vue.component('名字','对象))，暴露install方法。分为三步：

引入组件
定义install方法并注册为全局组件
暴露install方法

import Dialog from './Dialog'

const install = (Vue) => {
  Vue.component(Dialog.name, Dialog)
}

export default {
  install
}

1
2
3
4
5
6
7
8
9

在main中进行全局引入

import Vue from 'vue'
import App from './App.vue'
import LxjUI from './components'

Vue.config.productionTip = false
Vue.use(LxjUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10

组件测试

在App中测试组件

<template>
  <div id="app">
    <xj-dialog title='你好！'>
      <h3>这是我的dialog组件</h3>
    </xj-dialog>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

到这里dialog组件就封装完毕了

# 四、打包

什么是打包？

我理解的打包是 js、css、html 合并，将多个文件打包成一个文件并解决浏览器兼容问题。

以webpack为例：
  1. 提高性能，压缩体积。模块化开发有很多引用关系，打包后会变成一个js，减少了http请求。
  2. 将高版本js语法转为低版本。开发过程中可能会使用ES6语法，打包后能将语法转为ES5.
  3. 能将Less、Sass编译成css
1
2
3
为什么要打包？

组件封装完成，现在只是自己的项目可以使用，但是我们需要让别人的项目也能使用，所以需要打包成js文件。

vue文件会打包成dist文件，不仅节约资源，还能让其他浏览器也能解析

这里使用webpack打包，需要配置package.json文件的scripts，新增build命令。

由于我是用脚手架创建的vue项目，所以默认初始化了package.json。

初始化package.json

在package.json中新增一行命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib ./src/components/index.js" // 新增命令
  }

1
2
3
4
5

执行打包命令：npm run lib
项目就生成了dist
- 在dist路径下会有多个js文件，这是因为打包生成了多种js规范的文件。
- 发布时，因为js文件较多，用户不可能全部使用，需要指定入口文件
这样我们的打包部分就完成了

# 五、发布到npm

发布到npm有很多注意点，学习发包的时候注意不到很多问题，以为简单的npm publish 就行。自己发包的时候才发现原来还有那么多细节。

第一步：设置package.json中的配置项

如果想把包发布到npm上，package.json中的private必须是false，需要将其设置为公用包："private":false
name必须为npm上没有的包，否则不能上传
同时我们可以指定入口文件"main":"dist/lxj-ui-upload.umd.min.js"

我们可以添加其他个人信息：

{
  "name": "shang-utils", // 包名，必须要独一无二
  "version": "1.0.0", // 版本号
  "author": "xxx", // 作者
  "description": "common toolkit", // 描述信息
  "keywords": ["utils", "format", "money", "phone"], // 关键词，提升SEO
  "repository": {
    // 代码托管位置
    "type": "git",
    "url": "https://github.com/xxx/shang-utils"
  },
  "license": "ISC", // 许可证
  "homepage": "https://your-package.org", // 包的主页或者文档首页
  "bugs": "https://github.com/xxx/shang-utils/issues", // 用户问题反馈地址
  "main": "index.js", // 入口文件
  "scripts": {
    // 存放可执行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    // 运行依赖
  },
  "devDependencies": {
    // 开发依赖
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

第二步：根目录下增加一个.npmignore文件

这个文件的作用是将一些不需要上传到npm的路径、文件进行忽略，我们在上传时就不会上传这部分了（类似.gitignore)。因为我们已经将项目打包好了，所以我们只需要上传dist路径下的打包文件，不需要上传源码。
```
# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map
```
1
2
3
4
5
6
7
8
9
第三步：上传到npm
- 如果安装了nrm，需要保证当前的源是npm，不能是淘宝源镜像
  
  修改为npm原镜像
```
npm config set registry=https://registry.npmjs.org
```
  1
  修改为淘宝源镜像
```
npm config set registry https://registry.npm.taobao.org
```
  1
- 添加npm用户
  - 进入dist目录，添加npm用户，执行命令：
  - npm adduser
  - 第一次发包需要设置
- 使用npm login登录
- 上传的包不是立马显示出来的，需要过一段时间
  - 在dist目录下执行命令：
  - npm publish
  - 发布失败的原因：npm中包名可能已经存在
  - 发布完成，npm包显示会有延迟

# 六、测试npm

进入npm官网直接搜索name属性的名字，如果能搜到就可以使用，如果搜不到可能是发包失败或者还没更新

将组件下载到本地项目

npm i lxj-ui //将我们包下载下来，就可以在项目的node-modules路径下找到这个包了

使用lxj-ui

在main中导入组件和组件依赖的样式

import LxjUi from 'lxj-ui' 
import 'lxj-ui/dist/lxj-ui.css'  
Vue.use(LxjUi)

1
2
3

在App.vue中测试一下

<xj-dialog title='你好！'>
      <h3>这是我的dialog组件</h3>
</xj-dialog>

1
2
3

到这里我们的自定义ui组件库就封装完成了。

# 七、更新包

// 自动更改版本号，并且commit
// npm version xxx

// 控制台会返回下一个小版本号 如v1.0.1
npm version patch

// 重新发布
npm publish

1
2
3
4
5
6
7
8

// patch：补丁号，修复bug，小变动，如 v1.0.0->v1.0.1
npm version patch

// minor：次版本号，增加新功能，如 v1.0.0->v1.1.0
npm version minor

// major：主版本号，不兼容的修改，如 v1.0.0->v2.0.0
npm version major

1
2
3
4
5
6
7
8

# 总结

这篇文章只是简单的封装Vue组件并发布到npm仓库，加强了Vue的install方法使用，加深了传参、插槽的使用，了解了打包相关知识。

一个好的组件，应该具有很高的复用性和广泛的适用范围、极强的扩展性。

编辑

上次更新: 2023/8/22 19:22:36

← PWA运用构建一个TS的npm包→