详解如何制作并发布一个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 相关文章推荐
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
简单谈谈json跨域
Mar 13 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
纯js实现画一棵树的示例
Sep 05 Javascript
vue实现简单学生信息管理
May 30 Javascript
解决vue scoped scss 无效的问题
Sep 04 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实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
python中map、any、all函数用法分析
2015/04/21 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
使用python实现画AR模型时序图
2019/11/20 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
入股协议书范本
2014/04/14 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
质量整改通知单
2015/04/21 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python