发布一个npm包

前言

我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架。

本例中我会使用vue脚手架创建一个项目,并发布到npm上面去。

通过脚手架创建项目

全局安装

首先,要创建项目,封装vue的插件用webpack-simple很合适,因此你需要全局安装@vue/cli-init插件:

yarn global add @vue/cli-init
//或者
npm install @vue/cli-init -g

使用vue init webpack-simple vue-test-plugin 初始化目录; vue-test-plugin是项目名称,也是新建项目的目录。
然后我使用全局安装失败了,那么我就使用局部安装把。

局部安装

新建D:/test test文件夹,局部安装@vue/cli-init插件:

yarn add @vue/cli-init
//或者
npm install @vue/cli-init

安装成功之后,使用命令初始化vue-test-plugin项目:

./node_modules/.bin/vue init webpack-simple vue-test-plugin

然后就一路enter直到项目创建完成。创建完成后的目录如下:

16b0becb4a7b5172?w=197&h=289&f=png&s=13135

插件开发

./src/目录下实现你自己的功能,我的功能实现完了之后如下:

16b0bef0db708318?w=232&h=266&f=png&s=9416

./src/lib/banner.vue:是主功能文件

./src/lib/index.js

import VueBanner from './banner.vue'
const plugin = {install: function(Vue) {Vue.component(VueBanner.name, VueBanner)}
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) {window.Vue.use(plugin)
}
export default plugin

我们在webpack配置的入口文件就是index.js,install是挂载组件的方法,有了它我们就可以在外部use一个插件了。

如果外部使用<script>引入的话window存在,window.Vue.use(plugin)就直接将插件挂在在全局了。

修改文件配置

package.json 文件

{"name": "vue-test-plugin","description": "vue的插件测试","version": "1.0.1","author": "姓名 <xxx@xxx.com>",// 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径"main":"dist/vue-test-plugin.js",//开源协议"license": "MIT",// 因为组件包是公用的,所以private为false"private": false,"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},// 指定代码所在的仓库地址"repository": {"type": "git","url": "git+xxxxx"  //这里写github的git地址,格式为:'git+' + gitHubURL},"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"],
// 指定关键字"keywords": ["vue","test-plugin"],// 项目官网的url"homepage": "github地址下的readme.md文件地址","devDependencies": {...}
}

webpack.config.js 文件

  // entry: './src/main.js',entry: './src/lib/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',// filename: 'build.js'filename: '/vue-test-plugin.js',library: 'VueTestPlugin',libraryTarget: 'umd',umdNamedDefine: true},

由于不是所有使用组件的人都是通过 npm 安装使用 import 引入组件的,还有很多人是通过 <script>标签的方式直接引入的,所以我们要将 libraryTarget 改为 umd 格式,同时我们要配置文件入口和出。

.gitignore 文件

dist/  //删除此行

因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。

index.html 文件

    <!-- <script src="/dist/build.js"></script> --><script src="/dist/vue-test-plugin.js"></script>

打包

yarn build 
//或者
npm run build

因为在import的时候,自动会加载packge.json文件中的main中的路径,我这里是:dist/vue-test-plugin.js,因此会去读取这个文件,所以需要打包。

发布npm

  • 1.注册npm官网账号
  • 2.切换到vue-test-plugin根目录下,添加npm账号:npm adduser
  • 3.输入自己的npm用户名、密码、邮箱。
  • 4.上传代码:npm publish

发布出现问题:npm ERR! publish Failed PUT 403

如果发布过程中出现此问题是因为使用了淘宝镜像,需要切换成原来的镜像,发布成功后,再切回来。

检查是否使用了淘宝镜像

npm config get registry

出现如下结果:

https://registry.npm.taobao.org/

如果出现如上结果,继续下一步

切换成原来的npm源

npm config set registry=http://registry.npmjs.org

继续npm publish发布npm包。

切回淘宝镜像

npm config set registry=https://registry.npm.taobao.org/

转载于:https://www.cnblogs.com/wenwenwei/p/10956523.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/483284.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三大运营商扎堆进军“元宇宙”

来源&#xff1a; 数据观综合编辑&#xff1a; 蒲蒲三大运营商集体进军“元宇宙”目前&#xff0c;除了腾讯、字节跳动、谷歌、Facebook、英伟达等科技巨头企业开启了“元宇宙”领域的布局&#xff0c;国内三大电信运营商也扎堆进入“元宇宙”玩家阵营。11月2日&#xff0c;中国…

性能测试需求调研分析方法

一、测试背景和目的 在需求调研开始&#xff0c;测试人员需要明确的测试目的&#xff0c;那么首先得清楚项目本身情况&#xff0c;针对不同的项目情况也会有不同的目的&#xff0c;根据项目情况一般可以分为以下六种情况&#xff1a; 1、完全新建系统 完全新建系统意味着被测试…

数据结构——线性表的C语言实现

文章目录1.什么是线性表&#xff1f;2.线性表的抽象数据类型3.线性表之顺序表的C语言实现4.线性表之链式表的C语言实现1.什么是线性表&#xff1f; 2.线性表的抽象数据类型 3.线性表之顺序表的C语言实现 #include<stdio.h> #include<stdlib.h>#define ElementType…

美国大学智库发布全球机器人专利态势报告

来源&#xff1a;https://cset.georgetown.edu/publication/trends-in-robotics-patents/?utm_sourceCenterforSecurityandEmergingTechnology&utm_campaigna76a55404a-TrendsinRoboticsPatents&utm_mediumemail&utm_term0_fcbacf8c3e-a76a55404a-438303754原文标…

困扰热力学的三个妖精

来源&#xff1a; 集智俱乐部作者&#xff1a;Katie Robertson译者&#xff1a;潘佳栋 审校&#xff1a;张澳、梁金 编辑&#xff1a;邓一雪 热力学是一个奇怪的理论。它虽然是我们理解世界的基础&#xff0c;但与其他物理理论有很大的不同。出于这个原因&#xff0c;它被称为物…

数据结构——堆栈的C语言实现

1.什么叫堆栈&#xff1f; 2.堆栈的数据类型描述 3.堆栈顺序存储的C语言实现 #include<stdio.h> #include<stdlib.h>#define MaxSize 10 #define ERROR -1 #define ElementType int typedef struct SNode *Stack; struct SNode{ElementType Data[MaxSize];int Top…

引用数据类型(类)

提到引用数据类型&#xff08;类&#xff09;&#xff0c;其实我们对它并不陌生&#xff0c;如使用过的Scanner类、Random类。 我们可以把类的类型为两种&#xff1a; l 第一种&#xff0c;Java为我们提供好的类&#xff0c;如Scanner类&#xff0c;Random类等&#xff0c;这些…

11位院士专家建言基础研究

来源&#xff1a; 中国科学报作者&#xff1a; 陈欢欢 胡珉琦 ■本报记者 陈欢欢 胡珉琦基础研究是否完全是自由探索&#xff1f;如何加强新时代的基础研究&#xff1f;如何打造一支潜心基础研究的科研队伍&#xff1f;11月15日&#xff0c;在中国科学院加强基础研究座谈会上&a…

数据结构——队列的C语言实现

1.什么是队列&#xff1f; 2.队列的抽象数据类型描述 3.队列之顺序表的C语言实现 #include<stdio.h> #include<stdlib.h>#define MaxSize 5 #define ElementType int #define ERROR -1typedef struct QNode *Queue; struct QNode{ElementType Data[MaxSize];int r…

java连接sqlserver报错

使用Java进行项目开发&#xff0c;一般是使用MySQL数据库&#xff0c;由于项目需要本次换成了SQLServer数据库&#xff0c;在eclipse中进行连接测试时驱动类、URL地址、用户名和密码都正确&#xff0c;但是会抛出以下异常&#xff0c;无法正确连接到SQLServer数据库 com.micros…

李德毅院士:新一代人工智能十问

来源&#xff1a;智能系统学报编辑&#xff1a;王娜 审核&#xff1a;李雪莲--- 基本共识 ---智能是学习的能力&#xff0c;以及解释、解决问题的能力&#xff1b;人工智能是脱离生命体的智能&#xff0c;是人类智能的体外延伸&#xff1b;通用人工智能面向不同的情境&a…

数据结构——树的C语言实现

文章目录1.什么是树&#xff1f;2.如何判断是否是树&#xff1f;3.树的基本术语4.树的表示方法5.二叉树的定义6.特殊二叉树7.二叉树的性质8.二叉树的抽象数据类型定义9.二叉树的存储结构9.1顺序存储9.2 链表存储10.二叉树的遍历10.1 二叉树的遍历方法1.递归遍历2.层序遍历10.2 …

Gartner:为什么元宇宙商业离我们还很遥远?

来源&#xff1a;云技术(文&#xff1a;Gartner杰出研究副总裁Mark Raskino&#xff09;我记得第二人生&#xff08;Second Life&#xff09;的创始人Philip Rosedale说过&#xff1a;“请打开您的防火墙&#xff0c;进入到我们的世界中&#xff01;”他曾在台上接受过我的同事…

数据结构——二叉搜索树的C语言实现

1.什么是二叉搜索树&#xff1f; 2.二叉搜索树的操作 3.二叉搜索树的C语言实现 #include<stdio.h> #include<stdlib.h>#define ElementType int typedef struct TreeNode *BinTree; typedef BinTree Position; struct TreeNode{ElementType Data;BinTree Left;Bin…

模拟整个地球:英伟达Earth-2超级计算机即将上线

来源&#xff1a;机器之心未来几十年的世界将会发生什么变化&#xff0c;英伟达决定制造一台超级计算机来模拟整个地球。「如何让我们的未来在今天就变成现实呢&#xff1f;答案就是模拟&#xff0c;」英伟达创始人、CEO黄仁勋说道。上周二的GTC大会上&#xff0c;英伟达提出了…

数据结构——堆的C语言实现

1.什么是堆&#xff1f; 2.堆的抽象数据类型描述 3.堆的C语言实现 #include<stdio.h> #include<stdlib.h>#define ElementType int #define MaxData 100 typedef struct HeapStruct *MaxHeap; struct HeapStruct{ElementType *Elements;int Size;int Capacity; };…

洛谷P1067 多项式输出

.. 题目描述 一元nn次多项式可用如下的表达式表示&#xff1a; f(x)a_nx^na_{n-1}x^{n-1}\cdots a_1xa_0,a_n\ne 0f(x)an​xnan−1​xn−1⋯a1​xa0​,an​≠0 其中&#xff0c;a_ix^iai​xi称为ii次项&#xff0c;a_iai​ 称为ii次项的系数。给出一个一元多项式各项的次数和系…

李飞飞团队:如何制造更聪明的人工智能?让人工生命在复杂环境中进化

来源&#xff1a;集智俱乐部作者&#xff1a;郭瑞东 审校&#xff1a;张澳 编辑&#xff1a;邓一雪 论文题目&#xff1a;Embodied intelligence via learning and evolution论文链接&#xff1a;https://www.nature.com/articles/s41467-021-25874-z1. 智能和身体形态有关动物…

数据结构——图的C语言实现

文章目录1.什么是图&#xff1f;2.图的抽象数据结构3.如何在程序中表示一个图&#xff1f;3.1 邻接矩阵3.2 邻接表4.图的遍历4.1 深度优先搜索4.2 广度优先搜索5.图的C语言实现1.什么是图&#xff1f; 2.图的抽象数据结构 3.如何在程序中表示一个图&#xff1f; 3.1 邻接矩阵 …

张亚勤院士谈“智能计算新趋势”

来源&#xff1a;人工智能计算大会作为第四次工业革命的核心&#xff0c;人工智能已经成为全球新一轮科技革命和产业变革的核心驱动力。在2021人工智能计算大会&#xff08;AICC 2021&#xff09;上&#xff0c;清华大学智能科学讲席教授、美国艺术与科学院院士张亚勤带来了《智…