将Vue组件打包发布到npm包管理平台

元素苏_

已于 2023-06-03 20:54:04 修改

阅读量2.7k

点赞数

文章标签： vue.js npm javascript

于 2023-06-03 20:18:14 首次发布

本文链接：https://blog.csdn.net/yuansusu_/article/details/131024011

版权

1.上传前提

先到npm中文网官网 (p2hp.com)官网上面注册一个账号，如果有账号了忽略这步

2.准备封装组件

准备上传组件前有两种方式，可以在当前项目中进行打包上传，需要单独创建一个文件夹来放置封装的组件；还可以创建一个新的项目，然后把自己的组件复制过来，单独配置打包内容，不影响原组件在项目中的使用。（这里建议新创建一个Vue项目）

创建好的项目文件（bebel和eslint），将原本src路径下的components和其他无用的删掉，新建一个package文件夹，这是存放组件打包的文件夹，在package文件夹下面创建index.js作为对外导出配置文件。

注意，封装的组件一定要有name属性，而且不要和市面上组件的命名冲突。

上面package文件下的assets是放置静态资源的，components是放打包的组件。

3.配置项目文件

首先将package.json文件进行修改，只有"private": false修改就行，其他修改是为了打包以后的查看，可以根据需要来修改。
  "name": "drawing-box",    //包名称
  "version": "1.0.0",       //包版本
  "description": "Fabric.js二次封装", //包简短描述
  "private": false,    //一定设置为false,为true表示拒绝上传到npm包管理平台
  "main": "babel.config.js",    //文件入口文件
  "author": "yuansusu",    //作者名
  "keywords": [    //包关键字
    "Fabricjs",
    "canvas"
  ],
  "license": "ISC"
组件的样式在打包后可能会不生效，需要引入包的时候额外引入css样式，对于组件样式比较少的情况，可以直接在vue.config.js中配置js和css不分离打包，将extract设置为false即可。
module.exports = {
  lintOnSave: false,
  //样式与js不分开
  css: {
    extract: false
  }
}
书写index.js的内容，首先在文件中导入组件，并给组件或Vue添加install方法，这个方法会在组件在外部导入的时候使用Vue.use来触发。
//导入使用的包
import ElementUI from 'element-ui'

//导入向外共享的组件或方法
import Drawing from './components/Drawing.vue';

// 1.将多个对象放入数组（多个组件使用数组，然后循环添加方法）
// const components = [Drawing]
// const install = (Vue) => {
//   Vue.use(ElementUI);
//   components.forEach(component => {
//       Vue.component(component.name, component);
//   })
// }

// 2.给组件定义install方法
// Drawing.install = Vue => {
//   Vue.use(ElementUI);
//   Vue.component(Drawing.name, Drawing)
// }
// 直接导出组件
//export default Drawing

//3.定义方法，导出对象
const install = (Vue) => {
  Vue.use(ElementUI);
  Vue.component(Drawing.name, Drawing)
}
//对外导出组件（导出对象形式）
export default {
  install,
  Drawing
}
上面有三种导出的方法，前两个分别适用多组件导出和单个组件导出，我这里使用的是单个组件导出的方式。

4.设置打包命令

前面的准备好以后，需要在package.json中的script节点下添加一个命令：
"lib": "vue-cli-service build --target lib ./src/package/index.js --name drawing-box --dest drawing-box"
前面的lib可以根据自己喜好进行命名，后面的命令为：

–target lib 路径 => 指定打包的目录
–name 名称 => 打包后的文件名字
–dest 名称 => 打包后的文件夹的名称

执行命令：
npm run lib
打包完成后的信息，并在根路径下生成了一个打包文件

5.初始化上传包信息和README.md文件

首先进入打包的文件路径下，进行npm初始化
cd .\drawing-box\
npm init -y
上面生成的package.json文件的内容修改一下，可以参照项目根路径下的package.json的内容填写。注意的是，每次发布包版本的version的值不能相同，并且建议以1.0.0为开始。

创建一个README.md文件，在上传npm包后，会将里面的内容展示并介绍如何使用npm包。下载VsCode插件Markdown All in One，可以进行实时预览md文档内容，安装后点击右上角打开。

6.发布包

终于到了发布包的时候了，首先要确保自己的npm地址源是npm官方，
npm config get registry
显示https://registry.npmjs.org/就可以进行登录，如果不是则切换npm地址
npm config set registry https://registry.npmjs.org/
登录npm账号
npm login
等待一会，出现username：，输入自己的账号，密码，然后新的设备登录会有一个邮箱验证码，输入邮箱验证码即可。

注意，发布的包名称必须时npm库中没有的，不知道有没有可以去npm官网上查看，没有话就可以进行发布了，注意要在打包的路径下发布包。

发布包，当发布成功后，会显示当前上传的包名称@版本信息，可以去npm官网搜索自己发布的包
 npm publish   
进入npm查找刚刚发布的包，一般会有邮箱提示。

结语

大家对Canvas感兴趣可以下载包看看，这是一个绘画板组件，目前功能比较少，后续会不断完善，如果上面步骤有什么问题可以在评论留言。