用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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
原生js+ajax分页组件
Jan 30 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
vue axios请求成功却进入catch的原因分析
Sep 08 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小程序自动提交到自助友情连接
2009/11/24 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP查询快递信息的方法
2015/03/07 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
javascript中Object使用详解
2015/01/26 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
Python新手实现2048小游戏
2015/03/31 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
详解Python正则表达式re模块
2019/03/19 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
少先队入队活动方案
2014/02/08 职场文书
出国英文推荐信
2014/05/10 职场文书
学校班班通实施方案
2014/06/11 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
倡议书格式
2014/08/30 职场文书
死亡证明书样本说明
2014/10/18 职场文书
党性分析材料格式
2014/12/19 职场文书
大明湖导游词
2015/02/03 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
nginx配置之并发频次限制
2022/04/18 Servers
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL