用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 相关文章推荐
javascript删除option选项的多种方法总结
Nov 22 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
javascript包装对象实例分析
Mar 27 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
编译问题
2006/10/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python中的面向接口编程示例详解
2021/01/17 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
shell程序中如何注释
2012/01/28 面试题
六个一活动实施方案
2014/03/21 职场文书
活动总结怎么写啊
2014/05/07 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技