H5W3
当前位置:H5W3 > 其他技术问题 > 正文

基于vue脚手架构建库并发布到npm

构建库的常见方法有两种:一种是自己手动构建webpack库打包,设置output为 library; 另一种是基于vue-cli3输出库资源包。我们采用第二种vue脚手架的方式构建库。

新增编译库命令
// package.json
"scripts": {
// ...
"lib": "vue-cli-service build --target lib --name vcolorpicker --dest dist packages/index.js"
}
  • --name: 库名称。
  • --target: 构建目标,默认为应用模式。这里修改为 lib 启用库模式。
  • --dest: 输出目录,默认 dist。
  • [entry]: 最后一个参数为入口文件,默认为 src/App.vue。

更多详细配置查看 ☛ vue脚手架官网

如果该库依赖于其他库,请在vue.config.js 配置 externals
// vue.config.js
module.exports = {
configureWebpack:{
externals: {
vue: 'Vue',
'vue-router':'VueRouter',
axios: 'axios'
}
}
}

执行 npm run lib 就可以发现我们的库被打包到了 根目录的dist文件夹下。

添加 .npmignore 文件(可选)

和 .gitignore 的语法一样,具体需要提交什么文件,看各自的实际情况

# 忽略目录
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map

配置npm库信息

配置package.json文件,以发布库文件。

{
"name": "gis",
"version": "1.2.5",
"description": "基于 Vue 的库文件",
"main": "dist/gis.umd.min.js",
"keyword": "vue gis",
"private": false,
"files": ["dist"],
"license": "MIT"
}
  • name: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。
  • version: 版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。
  • description: 描述。
  • main: 入口文件,该字段需指向我们最终编译后的包文件。
  • keyword:关键字,以空格分离希望用户最终搜索的词。
  • author:作者
  • files: 要上传的文件
  • private:是否私有,需要修改为 false 才能发布到 npm
  • license: 开源协议
  • dependencies: 依赖库
注意每次发布新的库,需要更改版本号,规则如下:
  • 主版本号(Major):当你做了不兼容的API修改
  • 次版本号(Minor):当你做了向下兼容的功能性新增
  • 修订号(Patch):当你做了向下兼容的问题修正

登录npm

首先设置登录的npm镜像地址

然后在终端执行登录命令,输入用户名、密码、邮箱即可登录

接着发布库资源到npm

最后发布成功可到官网查看对应的包并下载

未经允许不得转载:H5W3 » 基于vue脚手架构建库并发布到npm

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址