详解如何制作并发布一个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 相关文章推荐
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
javascript截取字符串小结
Apr 28 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
微信小程序自定义弹出层效果
May 26 Javascript
如何在基于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
PHP SQLite类
2009/05/07 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python动态加载变量示例分享
2014/02/17 Python
在Python的web框架中配置app的教程
2015/04/30 Python
python开发之文件操作用法实例
2015/11/13 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python中的引用知识点总结
2019/05/20 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
高二学生评语大全
2014/04/25 职场文书
教师师德演讲稿
2014/05/06 职场文书
秦兵马俑导游词
2015/02/02 职场文书
篮球赛新闻稿
2015/07/17 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python