开发vue插件并发布到npm包管理工具的流程
1-10是开发流程,后面的是发布流程
1. 在Git里面…新建项目

2. 克隆项目到本地用来开发
git clone https://github.com/***/vue-prevent-browser-back.git
3. 运行命令行,初始化项目,生成package.json
npm init –y
4. npm install 安装包
5. 在安装vue-cli的情况下执行
vue-init webpack-simple创建项目结构

6. 删除多余文件 index.html清空src文件夹内容

7. 把插件内容复制到src

8. 修改package.json配置内容


9. 修改webpack.config.js的output部分配置


10. 打包输出插件 npm run build
有的插件不需要打包直接把代码复制到dist文件就好了

11. 去注册npm账号
12. 发布前要配置要发布的内容,要不会把各种乱七八糟的文件都发布了
a. 使用 .npmignore 设置忽略哪些文件
如果项目没有使用 git或者 没有 .gitignore 文件, 那么可以添加 .npmignore 文件来设置忽略哪些文件,.npmignore 的写法跟 .gitignore 的规则完全一样。 需要注意的是如果同时使用了 .npmignore 和 .gitignore 的话, 只有 .npmignore 会生效, 优先级比较高。
b. 使用 package.json 的 files 字段选择发布哪些文件
上面两种方式都是设置忽略哪些文件, 有时可能只想发布编译打包后的几个文件或者目录, 如果按照上面的设置会很麻烦, 这是可以直接在 package.json 中 files 字段设置发布哪些文件或目录, 这样的话, 只有这些目录或文件才会被publish.
同时需要说明的是这里的优先级是高于 .npmignore 和 .gitignore 的。
c. npm默认带了一些规则
除了上面的规则外, npm还有一些内置的规则,会被自动忽略的文件有

node_modules下的所有文件也会被忽略。另外还有一部分文件会被包含, 即便设置忽略也无效, 这些文件有

黑名单模式:.npmignore文件,没有.npmignore情况下使用.gitignore文件。
白名单模式:package.json里边配置files字段


13. 发布 先登录 然后版本号必须跟之前发布的不一样才可以

14. 登录npm: npm login

15. 发布:npm publish

遇到的问题:
1. npm ERR! you must verify your email before publishing a new package: https:/
就是没有通过验证就发包 结果报错了
得通过邮件验证下
2 . npm err You must be logged in to publish packages. : vue-prevent-browser-back
解决:包名被占用,package.json改一个。
开发vue插件并发布到npm包管理工具的流程的更多相关文章
- nodeJS---模块与npm包管理工具
nodeJS---模块与npm包管理工具 一:从模块外部访问另一个模块内的成员; 假如我现在还在D盘中的node文件夹内中的app.js代码改成如下: var msg = 'hello'; var f ...
- NPM 包管理工具详解,使用教程
NPM 包管理工具 1.1 定义:什么是 NPM NPM 全称 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具.通过 ...
- Node.js权威指南 (4) - 模块与npm包管理工具
4.1 核心模块与文件模块 / 574.2 从模块外部访问模块内的成员 / 58 4.2.1 使用exports对象 / 58 4.2.2 将模块定义为类 / 58 4.2.3 为模块类定义类变量或类 ...
- Node.js之包与npm包管理工具
Node.js之包与npm包管理工具 1.Node.js中的包 1.1在一个包中包含如下内容: package.json:对包进行描述 在bin子目录中存放二进制文件 在lib子目录中存放JavaSc ...
- node.js中npm包管理工具
现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <pa ...
- Nodejs-内置核心模块&npm包管理工具
1.核心模块的意义 如果只是在服务器运行JavaScript代码,其实意义不大(浏览器就可以解决)因为无法实现功能(读写文件,访问网络) Node的用处在于本身还提供了一系列的功能模块,用于与操作系统 ...
- NodeJS 中npm包管理工具
NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从 ...
- npm包管理工具在一般项目中的应用方法
最近自己在有时间,在通学一些知识点,记录一下,以便以后使用方面 当我们在做项目的时候,如果需要到包管理工具,那么我们一定会经历以下流程: 1.首先在官网下载node.js,然后默认安装到C盘 检查是否 ...
- node.js开发 npm包管理工具
npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...
随机推荐
- 浅谈Java三大框架与应用
前言:对于一个程序员来说,尤其是在java web端开发的程序员,三大框架:Struts+Hibernate+Spring是必须要掌握熟透的,因此,下面谈谈java三大框架的基本概念和原理. JAVA ...
- es7 class的写法
再看vue-router源码的时候(代码链接)看到这样的代码片段: export default class VueRouter { app: any; apps: Array<any>; ...
- revit二次开发之族的类型参数与实例参数的转换
1背景小伙伴在做revit二次开发的时候,可能需要在族环境中将族的类型参数与实例参数相互转换. 2思路1.使用族管理器FamilyManager,参见注释12.首先获取需要转换的参数(单个与批量),参 ...
- 关于计算文字显示占用画面大小(System.Drawing.Graphics.MeasureString)
最近遇到了一个需要手动为显示文字换行的场合,网上转了一圈,最后形成了下面的代码: var font = new Font("微软雅黑", 9F); - DETAIL_BASE_IN ...
- PAT_A1132#Cut Integer
Source: PAT A1132 Cut Integer (20 分) Description: Cutting an integer means to cut a K digits lone in ...
- python 从给定的URL中提取顶级域名(TLD)
安装 PyPI的最新稳定版本: pip install tld 或者GitHub的最新稳定版本: pip install https://github.com/barseghyanartur/tld/ ...
- python PIL图像处理-框选
框选图中位置 代码 from PIL import Image,ImageDraw,ImageFont,ImageFilter import random #--------------------- ...
- 分布式系列文章 —— 从 ACID 到 CAP / BASE
转自:https://mp.weixin.qq.com/s?amp;mid=2652037708&__biz=MzI0NDI0MTgyOA%3D%3D&idx=1&chksm= ...
- BZOJ 4567 [SCOI2016]背单词 (Trie树、贪心)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4567 题解: 显然答案一定小于\(n\times n\), 字符串倒过来变成前缀建Tr ...
- 在win7下,easyphp安装过程中MSVCR110.DLL没有被指定在WINDOWS上运行,或者它包含错误
这是安装easyphp后启动时出现的错误界面.查网上一大堆说法,基本上p用没有.真正解决的办法去m$站点 http://www.microsoft.com/zh-CN/download/details ...