如何使用vue脚手架构建库并发布到npm?下面本篇文章给大家介绍一下基于vue脚手架构建库并发布到npm的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
构建库的常见方法有两种:一种是自己手动构建webpack库打包,设置output为 library
; 另一种是基于vue-cli3
输出库资源包。我们采用第二种vue脚手架的方式构建库。
新增编译库命令
// package.json "scripts": { // ... "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js" } // packages/index.js 默认打包Step import Step from '../steps/src/step'; Step.install = function(Vue) { Vue.component(Step.name, Step); }; export default Step;
--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 才能发布到 npmlicense: 开源协议dependencies: 依赖库注意每次发布新的库,需要更改版本号,规则如下:
"version": "1.2.5"
主版本号为 1,次版本号 2,修订号 5
主版本号(Major):当你做了不兼容的API修改次版本号(Minor):当你做了向下兼容的功能性新增修订号(Patch):当你做了向下兼容的问题修正登录npm
首先设置登录的npm镜像地址
npm config set registry http://168.20.20.57.4873
然后在终端执行登录命令,输入用户名、密码、邮箱即可登录
npm login
接着发布库资源到npm
npm publish
最后发布成功可到官网查看对应的包并下载
npm install package_name
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程入门!!
最新评论