详解如何制作并发布一个vue的组件的npm包


Posted in Javascript onNovember 10, 2018

前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础。

因为本文主要是讲如何把一个vue组件做成npm包并发布。

分为2大步骤:

一.按照相应格式写我们的vue代码(就如同写一个jquery插件时、有其固定的格式一样)。

二.发布到npm上的流程

一、书写一个vue组件

不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西。

就做一个最简单的vue组件:就是传入用户名字,页面打印出‘hello,用户名'的组件。

比如,我的预期目标是其他vue项目中,npm install本组件后,可以如此使用该组件:

<template>
 <div class="index">
 
  <div class="demo1">
   <Msg :data="myData"></Msg>
  </div>
 
 </div>
</template>
<script>
 import Msg from 'npm-study-hamupp';
 export default {
  components: {
   Msg
  },
  data(){
   return {
    myData: {
     name: '天天',
     country: 'china'
    }
   }
  }
 }
</script>

然后网页上会显示:

详解如何制作并发布一个vue的组件的npm包

OJBK,现在开搞:

1.新建一个空文件夹,进入到根目录下。执行

npm init

初始化项目。然后会让你填一些项目相关的信息,跟着提示填就是了。没啥说的。注意name不要和现有的其他npm包重名了,不然一会儿发Npm包的时候会失败,可以先去npmjs.com搜一下有没有重名的。

这一步完成后,会生成package.json文件。

2.由于本例是一个vue的组件包,而且使用了es6和webpack,所以在devDependencies字段中,应该至少加入以下依赖:

package.json

{
	"name": "npm-study-hamupp",
	"version": "1.0.3",
	"description": "",
	"main": "dist/helloMsg.min.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack-dev-server --hot --inline",
		"build": "webpack --display-error-details --config webpack.config.js"
	},
	"repository": {
		"type": "git",
		"url": "git+https://github.com/hamuPP/npmStudy.git"
	},
	"author": "",
	"license": "ISC",
	"bugs": {
		"url": "https://github.com/hamuPP/npmStudy/issues"
	},
	"homepage": "https://github.com/hamuPP/npmStudy#readme",
	"devDependencies": {
		"babel-core": "^6.26.0",
		"babel-loader": "^7.1.2",
		"babel-plugin-transform-object-rest-spread": "^6.26.0",
		"babel-plugin-transform-runtime": "^6.23.0",
		"babel-polyfill": "^6.26.0",
		"babel-preset-es2015": "^6.24.1",
		"css-loader": "^0.28.7",
		"es6-promise": "^4.1.1",
		"less": "^2.7.3",
		"less-loader": "^4.0.5",
		"style-loader": "^0.19.0",
		"url-loader": "^0.6.2",
		"vue": "^2.5.9",
		"vue-hot-reload-api": "^2.2.4",
		"vue-html-loader": "^1.2.4",
		"vue-loader": "^13.5.0",
		"vue-router": "^3.0.1",
		"vue-style-loader": "^3.0.3",
		"vue-template-compiler": "^2.5.9",
		"vuex": "^3.0.1",
		"webpack": "^3.9.1",
		"webpack-dev-server": "^2.9.5"
	}
}

这些依赖的用处分别都是啥,自己查。

3.执行npm install,下载这些依赖包。

4.新建2个文件夹:dist和src,名字按照个人习惯吧。我习惯dist代表发布时的目录,src是开发目录。dist里面的js是到时候通过webpack打包后的文件。待会只会提交dist目录到npm官网上,src不提交。

src里:我们比较常规的写一个vue组件

详解如何制作并发布一个vue的组件的npm包

样式就不说了,照常写。

app.vue(写法上也很常规):

<style scoped lang="less">
 @import 'styles/common.less';
</style>
<template>
 <div class="msg-wrapper">
  <span>hello!</span>
  <span class="account">{{data.name}}</span>
 </div>
</template>
<script>
 export default {
  name:'Msg',
  data () {
   return {}
  },
  props:{
   data:{
    type:Object
   }
  },
  methods: {
 
  },
  created(){
   let that = this;
  }
 }
</script>

index.js(这里的写法就与普通vue项目有所不同了,主要要把它export出去):

import Msg from './app.vue'
export default Msg;

5.加入webpack打包配置,并把src中的内容打包进dist目录内:

根目录下新增weppack.config.js文件

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");
 
module.exports = {
 devtool: 'source-map',
 entry: "./src/index.js",//入口文件,就是上步骤的src目录下的index.js文件,
 output: {
  path: path.resolve(__dirname, './dist'),//输出路径,就是上步骤中新建的dist目录,
  publicPath: '/dist/',
  filename: 'helloMsg.min.js',
  libraryTarget: 'umd',
  umdNamedDefine: true
 },
 module: {
  rules: [{
    test: /\.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /\.less$/,
    use: [
     { loader: "style-loader" },
     { loader: "css-loader" },
     { loader: "less-loader" }
    ]
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
    loader: 'babel-loader'
   },
   {
    test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
    loader: 'url-loader',
    query: {
     limit: 30000,
     name: '[name].[ext]?[hash]'
    }
   }
  ]
 },
 plugins: [
  new webpack.DefinePlugin({
   "process.env": {
    NODE_ENV: JSON.stringify("production")
   }
  })
 ]
};

然后执行npm run build,就会在dist目录下生成helloMsg.min.js。这即是我们这个npm包的主文件。

6.修改package.json中的main字段中指向的主文件信息

package.json

{
	...
	"main": "dist/helloMsg.min.js",

7.新建一个文件,名为.npmignore,是不需要发布到npm的文件和文件夹,规则和.gitignore一样。如果你的项目底下有.gitignore但是没有.npmignore,那么会使用.gitignore里面的配置。

例如我的:

.npmignore

.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js

至此,一个npm组件包就做完了,剩下的,只是提交到npm官网去。

(如果要严谨点,当然还需要加入单元测试通过后再发包。。。但是。。。)

二、发布到npm上的流程

1.前提,得有个npm账号,没有就新注册一个账号,

https://www.npmjs.com/signup?utm_source=house&utm_medium=package%20page&utm_campaign=free%20orgs&utm_term=Sign%20up%20for%20npm

2.进入到项目的根目录下,运行 npm login

它会让你输入你的用户名,密码和邮箱,若登录成功,会显示:

Logged in as 你的名字 on https://registry.npmjs.org/.

3.然后执行npm publish,即可将这个npm包发布到npm官网上拉。

4.更新、发新包。

需要发新包时,需要自己手动修改package.json中的version版本号,惯例是+1啦,比如1.0.0-->1.0.1。然后npm login,npm publish。即可。

三、结语:

1.发包时的常见错误:

name名重名、name名还有大写字母。。。

2.本项目的git地址:

https://github.com/hamuPP/npmStudy,如果你对本文说的不太明白,可以下载这个项目,自己随便改一下app.vue里面的东西,然后修改package.json中的name和version(一定要改哦),提交到npm上试试

3.我还按照该项目结构,做了一个基于vue 的同步树的npm组件包。

https://github.com/hamuPP/t-vue-tree

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件开发全解析
Oct 10 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
如何在基于vue-cli的项目自定义打包环境
Nov 10 #Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 #Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 #Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 #Javascript
微信小程序实现跑马灯效果
Oct 21 #Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 #Javascript
vue.js自定义组件directives的实例代码
Nov 09 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python转码问题的解决方法
2008/10/07 Python
Python base64编码解码实例
2015/06/21 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
一道python走迷宫算法题
2018/01/22 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Python3爬虫全国地址信息
2019/01/05 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python全栈知识点总结
2019/07/01 Python
Python如何用filter函数筛选数据
2020/03/05 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
2014年元旦活动方案
2014/02/15 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
旅游节目策划方案
2014/05/26 职场文书
小学学校评估方案
2014/06/08 职场文书
禁烟标语大全
2014/06/11 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书