用vue封装插件并发布到npm的方法步骤


Posted in Javascript onOctober 18, 2017

一、基于vue的国家区号列表

vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号。

用vue封装插件并发布到npm的方法步骤

全球区号列表

1.1 初始化组件

用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来。

vue init webpack vue-flag-list
cd vue-flag-list
cnpm install 
npm run dev

1.2 根据自己的需求,实现具体功能,我的主要功能写在vue-flag-list.vue组件中。

<template>
 <div id="flag">
 ...
 </div>
</template>

<script>
 export default {
  name: 'vue-flag-list',
  ...
 }
</script>

<style scoped>
 ...
</style>

功能写好后,修改package.json等配置文件,为打包发布做准备

1.3 添加index.js

import flagComponent from './Vue-Flag-List.vue'

const VueFlagList = {
 install: function (Vue) {
 if (typeof window !== 'undefined' && window.Vue) {
  Vue = window.Vue
 }
 Vue.component('VueFlagList', flagComponent)
 }
}

export default VueFlagList

1.4 修改配置文件

1.4.1 package.json

{
 "name": "vue-flag-list",
 "version": "1.0.0",
 "description": "A vue plugin for entering and selecting area code",
 "author": "guimin",
 // 因为组件包是公用的,所以private为false
 "private": false,
 // 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径
 "main": "dist/vue-flag-list.min.js", 
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js"
 },
 // 指定代码所在的仓库地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后,包中存在的文件夹
 "files": [
 "dist",
 "src"
 ],
 // 指定关键字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //开源协议
 // 项目官网的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2 .gitignore 文件

因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。

1.4.3 webpack.prod.conf.js 文件

为了支持多种使用场景,我们需要选择合适的打包格式。常见的打包格式有 CMD、AMD、UMD,CMD只能在 Node 环境执行,AMD 只能在浏览器端执行,UMD 同时支持两种执行环境。显而易见,我们应该选择 UMD 格式。Webpack 中指定输出格式的设置项为 output.libraryTarget,其支持的格式有:

  • “var” - 以一个变量形式输出: var Library = xxx (default);
  • “this” - 以 this 的一个属性输出: this[“Library”] = xxx;
  • “commonjs” - 以 exports 的一个属性输出:exports[“Library”] = xxx;
  • “commonjs2” - 以 module.exports 形式输出:module.exports = xxx;
  • “amd” - 以 AMD 格式输出;
  • “umd” - 同时以 AMD、CommonJS2 和全局属性形式输出。

以下是 webpack.prod.conf.js 中 output 设置的示例:

output: {
 path: path.resolve(__dirname, '../dist'),
 publicPath: '',
 filename: 'vue-flag-list.min.js',
 library: 'VueFlagList',
 libraryTarget: 'umd',
 umdNamedDefine: true
 },

Vue 是组件库的外部依赖。组件库的使用者会自行导入 Vue,打包的时候,不应该将 Vue 打包进组件库。但是,如果你将打包后的组件库以 <script> 标签形式直接引入,你会发现并不能正常执行,提示 vue 未定义。

以 <script> 标签形式使用组件时,会同样使用 <script> 标签导入 Vue。Vue 导入的变量是 “window.Vue” 而不是 “window.vue”,因此会出现 vue 未定义的错误。

所以,我们需要在 webpack.prod.conf.js 中配置 externals,如下:

externals: {
 vue: {
  root: 'Vue',
  commonjs: 'vue',
  commonjs2: 'vue',
  amd: 'vue'
 }
 },

另外,为了将css打包成一个文件,所以需要将 webpack.prod.conf.js 中的plugins 选项的

new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),

修改为

new ExtractTextPlugin({
  filename: 'vue-flag-list.min.css'
 }),

修改入口文件

entry: {
 app: './src/index.js'
 },

1.5 整理一下目录结构,我的目录结构如下:

- vue-flag-list
 + build
 + dist
 - src
 + img
 index.js
 Vue-Flag-List.vue
 ...

二、用npm发布一个包

在发正式包之前可以在本地先打一个包,然后测试下有没有问题,如果没问题再发布到npm上。

2.1 打包到本地使用

npm build
npm pack

npm pack 之后,就会在当前目录下生成 vue-flag-list-1.0.0.tgz 的文件。

打开一个新的vue项目,在当前路径下执行('路径' 表示文件所在的位置)

cnpm install 路径/vue-flag-list-1.0.0.tgz

在新项目的入口文件(main.js)中引入

import VueFlagList from 'vue-flag-list'
import 'vue-flag-list/dist/vue-flag-list.min.css'

Vue.use(VueFlagList)

在组件中使用

<flagCode height="30" width="120" @getCode="getCode"></flagCode>

methos: {
 getCode(code) {
  console.log(code)
 }
}

2.2 发布到npm

1、在 npm官网 注册一个npm账号

2、切换到需要发包的项目根目录下,登录npm账号,输入用户名、密码、邮箱

npm login

3、最后一步,执行npm publish即可

# lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish
# lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0

三、后记

折腾了很久,终于把vue-flag-list插件的雏形发布出去了,这是一个很简单的插件,以后会继续维护它,添加更多的实用功能。

  • npm unpublish --force:移除一个发布包(也可以移除指定版本的包)
  • npm logout:登出用户

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

Javascript 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
jquery 插件开发备注
Aug 27 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
Angular的MVC和作用域
Dec 26 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
详解Js中的模块化是如何实现的
Oct 18 #Javascript
JS跳转手机站url的若干注意事项
Oct 18 #Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 #Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 #Javascript
浅谈Node异步编程的机制
Oct 18 #Javascript
js实现随机点名系统(实例讲解)
Oct 18 #Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 #Javascript
You might like
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python单元测试unittest实例详解
2015/05/11 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
查看keras的默认backend实现方式
2020/06/19 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
期末自我鉴定
2014/01/23 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
厂区绿化方案
2014/05/08 职场文书
消防安全宣传标语
2014/06/07 职场文书
大学生找工作求职信
2014/07/09 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
先进个人材料怎么写
2014/12/30 职场文书
交通安全教育主题班会
2015/08/12 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python