制作并发布第一个vue组件的npm包
Posted 小小猫钓小小鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了制作并发布第一个vue组件的npm包相关的知识,希望对你有一定的参考价值。
最近在网上找到一个 网页制作辅助工具-jQuery标尺参考线插件 ,觉得在现在的一个项目中能用的上,插件是基于JQuery的,但是现在的项目是用vue写的。So...,
就照葫芦画瓢改装成了Vue组件,总的来说算是一个用处较多的组件,于是乎,就想着把它上传到Npm上分享出来。
以前只用过别人的包,这一次自己上传一个乐呵乐呵...顺便记录发布一下过程。
项目地址
https://github.com/gorkys/vue...
初始化项目
这里用的是webpack-simple
,可以理解为精简版的vue-cli
vue init webpack-simple vue-ruler-tool
安装好后再就是一顿常规操作
npm install
npm dev
项目结构
原结构中红框里是放的vue的logo图片,用不着的东西,所以这里就把改成了组件文件夹与组件文件
还需要在src
下面新建一个index.js
作为入口文件,代码:
// src/index.js
export { default } from ‘./components/vue-ruler-tool‘
修改package.json
{
"name": "vue-ruler-tool",
"description": "vue标尺辅助线",
"version": "1.0.0",
"author": "gorkys",
"license": "MIT", // 开源协议
// 采用commonJs入口文件,如果不配置,我们在其他项目中就不用import XX from XX来引用了,只能以包名作为起点来指定相对的路径
"main": "dist/index.js",
"jsnext:main": "src/index.js", // 采用es6模块化入口
"private": false, // 因为组件包是公用的,所以private为false
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
// 指定代码所在的仓库地址
"repository": {
"type": "git",
"url": "https://github.com/mauricius/vue-draggable-resizable.git"
},
// 提交bug的地址
"bugs": {
"url": "https://github.com/mauricius/vue-draggable-resizable/issues"
},
// 项目官网的url
"homepage": "https://github.com/mauricius/vue-draggable-resizable",
"keywords": [
"vue",
"component",
"dragabble",
"resizable"
], // 指定关键字
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
...
}
}
修改.gitignore
因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。
修改webpack.config.js
// 原
module.exports = {
entry: ‘./src/main.js‘,
output: {
path: path.resolve(__dirname, ‘./dist‘),
publicPath: ‘/dist/‘,
filename: ‘build.js‘
}
...
}
// 新
module.exports = {
entry: ‘./src/index.js‘,
output: {
path: path.resolve(__dirname, ‘./dist‘),
publicPath: ‘/dist/‘,
filename: ‘index.js‘,
libraryTarget: ‘umd‘,
umdNamedDefine: true
}
...
}
测试插件
npm run build
npm pack
npm pack 之后,就会在当前目录下生成 一个vue-ruler-tool-1.0.0.tgz 的文件。
打开一个新的vue项目,将vue-ruler-tool-1.0.0.taz放到目录中,在当前路径下执行
npm install vue-ruler-tool-1.0.0.tgz
在新项目中引用组件就可以使用了
报错
在引用后报错无法解析,需要检查webpack.config.js
配置的输出文件路径是否与package.json
一样。
发布到npm
1、注册
2、登录并发布
npm login
npm publish
提示报错是因为注册完后没有进行邮箱验证,验证完成即可发布成功
参考文献
如何制作并发布一个vue的组件的npm包
发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
以上是关于制作并发布第一个vue组件的npm包的主要内容,如果未能解决你的问题,请参考以下文章