不会发布npm包?进来看看?

前言

npm(Node Package Manager),一个Node的包管理器,平时我们常用的公共模块(插件)或者叫做包大多都放在上面,所以接下来要封装的插件,我们就简单称它为npm包,本文从就从这个简单的例子开始,逐步对它进行封装-发布-更新-扩展-使用,进而到得一个相对完整的npm包,下面开始。

一、一个最简单的npm包

1.1 新建文件夹

可以找个地方直接建个文件夹,最好语义化一点,这样以后也方便管理,我们这里用终端建文件夹:
mkdir toupper-case-project // 这里我们建了一个名为toupper-case-project的文件夹
(对命令行还不太熟的小伙伴可以看看我这篇博客命令行不会?看这里)

1.2 初始化项目

在项目根目录下使用一下命令
npm init
这时终端会提示你输入诸如包名,版本号等信息,如下:

166e19cf5aaa80ad?w=734&h=271&f=png&s=66944

当然,你可以一路回车下来,或者你使用npm init -y就可以生成默认的package.json文件,效果都是一样的,然后我们得到以下文件,简单说明一下:

// package.json
{"name": "toupper-case-project",  // 包名称,默认和你文件夹同名,可改,但是需要去npm官网搜素这个名称是否已存在,因为包名不能重复"version": "1.0.0",  // 项目默认版本号,可改,如果项目后期更新再发布,则需要修改版本号"description": "",   // 项目描述,选填,可利于SEO "main": "index.js",  // 你的包的主要入口路径,就是别人安装了你的包后系统会去这个路径找你的代码"scripts": {         // 脚本命令,后面会讲到,现在使用默认的就行"test": "echo \"Error: no test specified\" && exit 1"},"author": "",        // 作者,选填"license": "ISC"     // 许可证,默认即可
}

注:以上代码使用时记得把注释删除,json不能注释

1.3 新建项目文件

根目录下新建index.jsupper.js两个文件分别如下:

// upper.js
let toUpper = (a) => {return a.toUpperCase();
};
export default toUpper;
// index.js
import toUpper from './upper.js';
export default toUpper;

此时我们的项目就应该只有三个文件,如下:

166e1877ebcd6dba?w=201&h=144&f=png&s=4728

upper.js用于项目功能逻辑,index.js用于导出功能模块,package.json用于配置相关信息,这样我们就把一个最简单的npm包写好了,接下里进入发布。

1.4 发布

1.注册npm账号

前往npm官网注册一个账号,记好账户名、密码和邮箱(邮箱收到邮件后一定要进行验证)。
 

2.源切换

这是个坑,估计很多小伙伴都踩过,毕竟国内npm的速度令人感动,所以大家都运行过一条熟悉的命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

但是发布时我们一定要把源切换回npm,而不是淘宝源,当然,直接运行下面这个命令即可解决:

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

但是老这样切来切去有点low啊,这时候nrm就派上用场了,nrm是什么?简单点说nrm就是专门用来管理和快速切换私人配置的registry的一个工具。

cnpm i nrm -g

安装好后使用nrm ls命令会显示如下:

166e187e1bf693c1?w=587&h=200&f=png&s=48493

*号在哪个地方就说明现在的源是哪个(我现在处在taobao源),也许你刚开始不显示*号,但不管显不显示,直接运行nrm use npm,然后再npm ls,这时候就发现*指在npm源上了,此时就可以进行下一步了。
 

3.登录

npm login

然后会提示你输入用户名、密码(是密文的,你看不见,直接输就行)和邮箱,登录成功后会显示:

166e1882a20ef425?w=541&h=27&f=png&s=8357

 
4.试着发布npm包

在项目根目录下运行npm publish即可发布,顺利的话就直接成功了,当然也可能会遇到问题:

  • 第一个就是权限问题,也许报这样的错误npm ERR! Error: EPERM: operation not permitted,这时候就得使用管路员权限来进行发布了,window + x会看到管理员终端选项,打开这个终端,然后再进行登录,发布即可。

  • 第二个就是名称问题,就是你的包名在npm上已经存在了,所以在package.json中将你的包名改成其他的,这样再发布,应该就没问题了。

发布成功后显示如下:

166e1898bcd2649c?w=568&h=42&f=png&s=14163

1.5 用用我们发布的包

随便找个练手项目试试:

cnpm i toupper-case-project -D

安装完成:

166e189ea51f1ee3?w=1011&h=210&f=png&s=65446

说明我们的包是可以下载安装的,然后试试功能,我就直接在vue项目中试试了,大家应该看得懂:

166e18a18cf14658?w=602&h=198&f=png&s=15419

然后运行项目:

166e190ad44a9f7e?w=569&h=106&f=png&s=8229

搞定!那如果我们后期把这个包改了呢,该怎么做?

1.6 更新包

我们把upper.js文件改一改:

// upper.js
let toUpper = (a) => {return 'Hello' + a.toUpperCase();
};
export default toUpper;

然后记得把package.json中的版本号也改了,正常来说加1即可,
"version": "1.0.0"改为"version": "1.0.1"

现在运行npm publish就可以直接把新的包覆盖上去:

166e1920767002a1?w=548&h=51&f=png&s=6587

然后我们在练手项目中怎么更新这个包呢?

  • 方法一(直接更新):cnpm update toupper-case-project(有时可能更新不完全)

  • 方法二(安装覆盖):cnpm i toupper-case-project -D(这个比较靠谱)

然后运行项目:

166e1925f5d9a973?w=716&h=130&f=png&s=11872

完美!这就是一个最简单的npm包,是不是没有想象中的那么触不可及?但说实话,这个包确实挺low,你看别人的包还经过打包啊、测试啊、还能在vue中直接Vue.use()方式来使用,而且还有交互。那下面我们就来试试。

二、基于webpack和vue的npm包

直接使用vue-cli的话会带上许多我们不需要的模块,太笨重,所以我们直接撸一个,如果对webpack还不太熟悉的,可以看看我这篇webpack4.x最详细入门讲解

2.1 构建项目(星级评价组件)

我们来封装一个可根据传入的评分数来显示星级的组件,类似这样的:

166e192d8b242349?w=226&h=71&f=png&s=2476

具体代码请移步github,请反手给个 ★ Star ^_~,下面开始:

首先新建一个名为star-evaluation的项目文件夹;
然后根据以下结构建立项目文件:

|——src
|    |——images
|    |     |——star24_half@2x.png
|    |     |——star24_off@2x.png
|    |     |——star24_on@2x.png
|    |——index.js
|    |——Star.vue
|——.npmignore  // 用于忽略不需要上传到npm的文件
|——package.json
|——README.md
|——webpack.config.js

各文件如下:

Star.vue具体代码如下,主要就是将传过来的数值处理后遍历出不同的class类名,然后添加到span上。

<!-- Star.vue -->
<template><div class="star"><span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span></div>
</template><script>// 星星长度
const LENGTH = 5;
// 星星状态
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';export default {data () {return {}},props: {score: {type: Number}},computed: {itemClasses () {let result = [];// 如果小数大于或等于0.5则变为0.5,否则为0let score = Math.floor(this.score * 2) / 2;// 全星let integer = Math.floor(score);// 半星let hasHalf = score % 1 !== 0;// 遍历全星for (let i = 0; i < integer; i++) {result.push(CLS_ON);}// 处理半星if (hasHalf) {result.push(CLS_HALF);}// 补齐,如果星数小于5,则一直循环判断填入数据,直到满足条件while (result.length < LENGTH) {result.push(CLS_OFF);}return result;}}
}
</script><style lang="scss" scoped>.star{font-size: 0;.star-item{display: inline-block;width: 10px;height: 10px;margin-right: 3px;background-repeat: no-repeat;background-size: 10px 10px;&:last-child{margin-right: 0;}}/* 三种图片类型*/.on{background-image: url(./images/star24_on@2x.png);}.half{background-image: url(./images/star24_half@2x.png);}.off{background-image: url(./images/star24_off@2x.png);}}
</style>
// index.js
import Star from './Star.vue';
export default Star;

package.json的依赖配置如下:

{"name": "star-evaluation","version": "1.0.0","description": "A plugin which use stars number to evaluate","main": "dist/bundle.js","scripts": {"build": "webpack --mode production","dev": "webpack-dev-server --open --mode development"},"repository": {"type": "git","url": "git+https://github.com/Better-Alan/star-evaluation.git"},"keywords": ["star", "evaluation"],"author": "BetterMan","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-preset-env": "^1.7.0","css-loader": "^1.0.0","file-loader": "^2.0.0","node-sass": "^4.9.4","sass-loader": "^7.1.0","style-loader": "^0.23.1","url-loader": "^1.1.2","vue": "^2.5.17","vue-hot-reload-api": "^2.2.4","vue-html-loader": "^1.2.4","vue-loader": "^15.4.2","vue-router": "^3.0.1","vue-style-loader": "^3.0.3","vue-template-compiler": "^2.5.9","webpack": "^4.23.1","webpack-cli": "^3.1.2"}
}

webpack.config.js配置如下,用于将/src中的内容打包到/dist(打包时会自动生成/dist文件夹)中的bundle.jsbundle.js其实就相当于我们的插件。

// webpack.config.js
const path = require('path');  // 路径处理模块
const { VueLoaderPlugin } = require('vue-loader');module.exports = {entry: {index: path.join(__dirname, "/src/index.js")   // 入口}, output: {path: path.join( __dirname, "/dist"), // 打包后的文件存放的地方publicPath: '/dist/',  // 设置公共路径filename: "bundle.js", // 打包后输出文件的文件名libraryTarget: 'umd'   // 将你的library暴露为所有的模块定义下都可运行的方式,它将可在 CommonJS, AMD 环境下运行},module: {rules: [{test: /\.vue$/,   // vue-loaderloader: 'vue-loader'},{test: /\.css$/,           // 正则匹配以.css结尾的文件use: ['style-loader', 'css-loader']},{test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader,一定是这个顺序,因为调用loader是从右往左编译的},{test: /\.(png|jpg|svg|gif)$/,  // 图片loaderuse: ['url-loader']},{test: /\.js$/,    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,loader: 'babel-loader'}]},plugins: [new VueLoaderPlugin()]
}

.npmignore(别忘了前面的点)文件用于忽略不需要上传到npm的文件,规则和.gitignore一样。如果你的项目内有.gitignore但没有.npmignore,则会使用.gitignore的配置。

.*
*.md
node_modules/
src/

README.md说明(不是必须),大家应该都比我6。

此时我们的目录应该如下:

166e193b32e255f1?w=252&h=333&f=png&s=17906

2.2 安装依赖

以上文件都配置好后就可以运行一下命令安装依赖了:

cnpm install

2.3 打包项目

依赖安装完成后对项目进行打包:

npm run build

2.4 登录并发布(确保当前处于npm源)

打包完成后运行npm login登录后npm publish发布:

166e193f3230aac7?w=517&h=151&f=png&s=34617

发布搞定!,那能不能用呢?我们去试试看。

2.5 试试我们的npm包

  1. 先下载:
cnpm i star-evaluation -D

166e194d6df1e847?w=1000&h=203&f=png&s=63288

  1. 项目中引入使用:

166e1952be1bcb7a?w=463&h=322&f=png&s=21526

运行后显示如下:

166e19566a4c73ec?w=489&h=162&f=png&s=6808

搞定,这是不是比之前那个toupper-case-project插件高端那么一丢丢?
 
那有的小伙伴可能会说了:“我平时看到的插件不是这么用的,很多都是直接Vue.use()后就可以用了,而且插件还有事件的。”
 
那我们再改改?

三、 升级包

其实能否使用Vue.use()这个方式来调用组件,取决于是否配置了install方法,我们给Star.vue组件加上看看:

3.1 配置install方法

// index.js
import Star from './Star.vue';Star.install = Vue => Vue.component(Star.name, Star);  // 给Star组件配置install方法,注册该组件 export default Star;

注:这里有个需要注意的地方,就是Star.name是指向我们给Star.vue文件中配置的name属性,别忘了配置它:

166e195d47c7efc9?w=310&h=141&f=png&s=6172

这时已经搞定了Vue.use()了,那我们再加上事件交互,就做个点击组件弹出具体的星级数值吧!

3.2 添加事件

具体修改如下:

<!-- Star.vue -->
<template><!-- 绑定showNumber方法 --><div class="star" @click="showNumber"><span class="star-item" v-for="(itemClass, index) in itemClasses" :key="index" :class="itemClass"></span></div>
</template><script>
...
export default {name: 'Star',   // 别忘加上这个属性...methods: {showNumber() {this.$emit('showNumber', '我是弹出的信息');  // 将自定义方法showNumber暴露出去,且将参数传出}}
}
</script>
...

3.3 打包-发布-使用

依旧老套路,修改版本号-打包-发布,然后我们在练手项目中cnpm i star-evaluation -D再安装一次,因为有时npm update star-evaluation方法不太靠谱,更新不完全。

然后我们在练手项目中使用Vue.use()方式和试试事件,在所要使用插件的文件中使用方式如下:

<template><div class="hello"><!-- 子组件所传出的自定义showNumber方法调用当前showMessage方法 --><Star @showNumber="showMessage" :score="2.6"/></div>
</template><script>import Vue from 'vue'   // 引入Vue
import Star from 'star-evaluation';  // 引入Star插件
Vue.use(Star)  // 使用Star插件// 以上的引入和注册一般是在main.js中统一完成,这个大家应该都比较熟悉export default {// 因为使用了Vue.use(Star)方式,所以这里不需要使用components: {Star}来注册插件methods: {// 点击组件触发此方法showMessage(mes) {alert(mes);}}
}
</script><style scoped>
</style>

然后我们npm run dev重启启用项目,点击组件显示如下:

166e19648c7c25ac?w=996&h=289&f=png&s=12517

搞定!是不是也没那么难?

最后

本来只打算简单的写下基本步骤的,没想到写(啰嗦)了这么长,有写得不合适的地方请多多指教,如果能对你有所帮助,也麻烦github给个星哈,这样我就可以放心的去搬砖了↓-↓

166e1967ded0de7d?w=690&h=690&f=jpeg&s=94347

转载于:https://www.cnblogs.com/BetterMan-/p/9907679.html

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

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

相关文章

如何让帝国CMS7.2搜索模板支持动态标签调用

帝国cms站内搜索一般不支持动态标签调用&#xff0c;如果要调用如何实现呢&#xff1f;修改两个地方就可以实现了。打开 /e/search/result/index.php 文件&#xff0c;找到&#xff08;文件改了&#xff0c;不会调用也是徒劳&#xff01;看看这个帝国cms搜索关键字调用标签(sho…

access字体变为斜体_Linux折腾记(四):Linux桌面系统字体配置详解

字体显示效果测试文字&#xff1a;复制代码代码如下:这一段是为了测试宋体字的显示效果&#xff0c;包括宋体里面自带的英文字体&#xff0c;“This is english,how does it look like?”。这一行是小字。后面几个字是加粗的宋体。标点符号“&#xff0c;。&#xff1a;&#…

oracle between and monday,oracle——时间

时间数据1. 插入时间数据插入语法命令&#xff1a;insert into floor values (to_date(年-月-日 时:分:秒,YYYY-MM-DD HH24:MI:SS));完整的时间插入insert into floor values (to_date(2010-07-12 09:10:12,YYYY-MM-DD HH24:MI:SS));查询显示&#xff1a;2010-07-12 09:10:12.0…

Nova 组件详解 - 每天5分钟玩转 OpenStack(26)

本节开始&#xff0c;我们将详细讲解 Nova 的各个子服务。 前面架构概览一节知道 Nova 有若干 nova-* 的子服务&#xff0c;下面我们将依次学习最重要的几个。今天先讨论 nova-api 和 nova-conductor。 nova-api Nova-api 是整个 Nova 组件的门户&#xff0c;所有对 Nova 的请…

肯德基圣代中间空心_建造冰淇淋圣代解释CSS位置

肯德基圣代中间空心by Kevin Kononenko凯文科诺年科(Kevin Kononenko) 建造冰淇淋圣代解释CSS位置 (CSS Positioning Explained By Building An Ice Cream Sundae) 如果您之前做过冰淇淋圣代&#xff0c;那么您可以了解CSS的位置。 (If you’ve made an ice cream sundae befo…

00

&#xff08;1&#xff09;设置gcc 把所有gcc版本解压到/home/flinn/tools/目录下&#xff0c;以免切换编译器export PATHPATH/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/home/flinn/tools/4.4.3/bin &#xff08;2&#xff09;编译&#xff1…

12_04_Linux软件管理之四yum

2019独角兽企业重金招聘Python工程师标准>>> RPM安装&#xff1a; 二进制格式&#xff1a; 源程序--》编译--》二进制格式 有些特性是编译时选定的&#xff0c;如果编译时未选定此特性&#xff0c;将无法使用&#xff1b; rpm包的版本会落后于源码包&#xff0c;甚至…

datastage 函数_DataStage常用函数大全

1/38DataStage常用函数大全DATASTAGE常用函数大全.................................................................................................1一、类型转换函数................................................................................................…

linux 解析elf文件格式,Linux下ELF文件解析

1. windows PE文件与Linux ELF文件概述在windows中可执行文件是pe文件格式&#xff0c;Linux中可执行文件是ELF文件&#xff0c;其文件格式是ELF文件格式&#xff0c;在Linux下的ELF文件除了可执行文件(Excutable File),可重定位目标文件(RellocatableObject File)、共享目标文…

富爸爸穷爸爸害了我_这是我必须告诉爸爸的-在我们的时间用完之前

富爸爸穷爸爸害了我by Bram Bos通过Bram Bos 这是我必须告诉爸爸的-在我们的时间用完之前 (This is what I must tell my dad — before our time runs out) I was a young boy in the 1980s. Like the typical Generation-X kid, I grew up in the days of the home computer…

应用容器公共免费部署平台

从网上信息&#xff0c;发现了一个公共的容器部署平台 openshift.com&#xff0c;可以将我们封装好的docker镜像部署到平台上&#xff0c; 这样就不需要拥有一台云服务器了。对于测试环境非常有用。 首先当然是需要注册。这里全英文 第二&#xff0c;注册之后需要选择你想要的套…

西门子rwd68温控器说明书_西门子RWD68说明书

西门子RWD68说明书显示第一界面Y1XX模拟量输出电压值YIXX传感器此时实际温度&#xff1b;同时按—键五秒显示第二界面PS4主控制回路参数&#xff1b;按—键显示第三界面PS3辅助回路参数但仅在室外补偿时出现&#xff1b;按—键显示第四界面PS2按—键显示第五界面PS1控制曲线运用…

linux 内存管理优化,Linux性能优化实战 内存篇 阅读笔记

第十五讲 基础篇&#xff1a;Linux内存是怎么工作的(2020.6.8)这一讲相关的内容正好之前看csapp的时候总结了一下&#xff0c;可以直接贴出来作为总结了。Linux的内存工作原理&#xff0c;这又是一个特别大的话题。一切向着尽量利用物理资源的方向在发展&#xff0c;在没有虚拟…

傅里叶变换与大数乘法

我们知道&#xff0c;两个 N 位数字的整数的乘法&#xff0c;如果使用常规的算法&#xff0c;时间复杂度是 O(N2)。然而&#xff0c;使用快速傅里叶变换&#xff0c;时间复杂度可以降低到 O(N logN loglogN)。 假设我们要计算以下两个 N 位数字的乘积&#xff1a; a (aN-1aN-2…

idea 启动界面导入项目_如何为您的项目启动有效的登录页面

idea 启动界面导入项目by Christian-Peter Heimbach通过克里斯蒂安彼得海姆巴赫 如何为您的项目启动有效的登录页面 (How to launch an effective landing page for your project) I began my career 10 years ago doing online marketing and advertising for video games. S…

linux程序已经在后台运行冻结了_如何使程序在Linux后台运行

经常在Linux上面运行程序都有这样的体验&#xff1a;某个程序运行的时候&#xff0c;会产生大量的log(提示)信息&#xff0c;但实际上我们只想让它跑一下而已&#xff0c;log暂时不需要或者后面才有需要。同时run多个相同或者不同程序的时候&#xff0c;占了好多的命令行界面&a…

数字时代的精益组织

精益IT应该帮助简化和改善我们为客户创造价值的方式&#xff0c;并提出面向未来的更好的解决方案。未来的组织将专注于同行业的产品或业务流——其他的一切&#xff0c;包括专家和管理者在内&#xff0c;都是为了让一线工作人员可以第一时间就做好&#xff0c;而又不会遇到任何…

9th week blog

1、第一个计算机语言&#xff1a;Fortran Fortran I诞生于1957年&#xff0c;由IBM设计&#xff0c;是世界上第一个真正的计算机语言。 Fortran I运行于IBM 704计算机上。 Fortran I支持&#xff1a;变量&#xff08;变量名最多6个字符&#xff09;、If和do语句、格式化IO。 不…

cas单点登录系统:客户端(client)详细配置(包含统一单点注销配置)

最近一直在研究cas登录中心这一块的应用&#xff0c;分享一下记录的一些笔记和心得。后面会把cas-server端的配置和重构&#xff0c;另外还有这几天再搞nginxcas的https反向代理配置&#xff0c;以及cas的证书相关的知识分享出来。 Cas由两部分组成&#xff0c;Cas Server和Cas…

open 端口打开Linux,linux – nmap显示打开的端口,但netstat没有

如果我使用nmap扫描我的服务器,则表明已打开21端口.但是当我登录到这个服务器并运行netstat时,我什么也看不见.$nmap -sT serverStarting Nmap 4.76 ( http://nmap.org ) at 2009-06-24 11:54 MSDInteresting ports on server (x.x.x.x):Not shown: 994 filtered portsPORT STA…