用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实现网站访问次数统计代码
Aug 12 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue 封装面包屑组件教程
Nov 16 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下的权限算法的实现
2007/04/28 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
使用js画图之饼图
2015/01/12 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
JS实现方形抽奖效果
2018/08/27 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python调用其他文件函数或类的示例
2019/07/16 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
冰淇淋开店创业计划书
2014/02/01 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
服务明星事迹材料
2014/12/29 职场文书
常务副总经理岗位职责
2015/02/02 职场文书