用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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
详解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基础知识介绍
2013/09/17 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python递归函数定义与用法示例
2017/06/02 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
公司领导推荐信
2013/11/12 职场文书
迎元旦广播稿
2014/02/22 职场文书
《去年的树》教学反思
2014/04/11 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书