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

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

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

全球区号列表

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:登出用户

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

(0)

相关推荐

  • vue封装第三方插件并发布到npm的方法

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用 项目初始化 封装vue的插件用

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

    一.基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号. 全球区号列表 1.1 初始化组件 用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来. vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev 1.2 根据自己的需求,实现具体功能,我的主要功能写在v

  • 自定义Vue组件打包、发布到npm及使用教程

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue init webpack-simple my-project -> cd my-project -> npm i -> npm run

  • 自定义vue组件发布到npm的方法

    本文介绍了自定义vue组件发布到npm的方法,分享给大家,具体如下: 为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用.导致修改bug的时候,总是要在项目分支中修改,然后同步到主线上,这样容易导致分支修改后没有同步到主线,慢慢的就会导致组件版本不统一,而导致升级组件很繁琐,最后可能都要去维护多个组件的不同版本,这样不是我们想要的. 所以就打算将组件打包发布到npm上,每个项目中只需要在package.json中修改组件版本即可同步最新版本. 组件发布历程 1.开始对打包不是很

  • 80行代码写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个插件实现的功能比较简单: 默认清除 js 代码中的 console.log 的打印输出: 可通过传入配置,实现移除 console 的其它方法,如 console.warn.console.error 等: 2. Webpack 的构建流程以及 plugin 的原理 2.1 Webpack 构建流程

  • Vue项目打包部署到apache服务器的方法步骤

    vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

  • vue2自定义组件通过rollup配置发布到npm的详细步骤

    创建Vue组件库项目首先,我们需要创建一个Vue组件库的项目.我们可以使用Vue CLI来快速创建一个基础的Vue项目. vue create my-component-library 配置rollup接下来,我们需要配置rollup以构建我们的组件库.创建一个名为rollup.config.js的文件并添加以下代码: import vue from 'rollup-plugin-vue'; import babel from 'rollup-plugin-babel'; import comm

  • vue封装axios与api接口管理的完整步骤

    目录 一.前言 二.axios封装步骤 三.api接口统一管理 总结 一.前言 axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 二.axios封装步骤 安装:npm install axios -S 一般我会在项目的src目录中,新建一个network文件夹,作为我们的网络请求模块,然后在里面新建一个http.js和一个api.js文件和一个reques.js.http.js文件用来封装我们的axios,api.js用来统一管理我们的接口url,

  • 教你30秒发布一个TypeScript包到NPM的方法步骤

    文章读译自The 30 second guide to publishing a typescript package to npm,部分内容有修改哈. 这篇文章要求你有一定的 JS .TS 和 NPM 的知识,如果你写过普通的 NPM 包就更好啦~如果没有的话网上也很多教程的,都很简单~ 发布过 npm 包的同学都知道,初始化一个 npm 项目,直接用 npm init -y 就可以了,那如果要用 ts 呢,直接 tsc --init 即可.这两个操作会生成 package.json 和 ts

  • Vue 中如何正确引入第三方模块的方法步骤

    方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件

随机推荐