如何像那些大佬一样写出一个属于自己的npm包

Maike
296 阅读3分钟

前言

目前在开发项目中常常需要npm 各种包拿来使用，这就引发疑问了？

这些包是怎么来的，为什么可以拿来直接使用？我们自己能不能也写一个呢？

回答是可以的，本文就将一步一步带你写出一个实现简单的两数相加的一个npm包，让你体验一下写npm包的流程是怎么样的。

话不多说，这就开始

m-adds

以编写一个两个数相加的方法为例，发布一个npm包的详细步骤如下

安装node环境

在写npm之前我们需要准备一些前置工作---安装node环境

我们可以去Node官网中下载node，接着安装即可，安装node时它会一起安装npm，安装完成之后可以通过node -v 和 npm -v 来确认node和npm是否安装成功

image.png

像我这样能输出版本号即为安装成功

image.png

npm包中代码的编写

打开cmd，输入以下代码

mkdir m-adds   //创建m-adds的文件，文件名可更改
cd m-adds   //打开m-adds的文件
npm init   //初始化文件

这里是对文件中的package的信息进行编写，下面是对其内容的依次介绍：

  • package name   项目名称
  • version   项目版本号
  • description   项目的描述信息
  • entry point   项目的入口文件
  • test command   项目启动时脚本命令
  • git repository   如果有git地址，可以将这个项目放到git仓库里
  • keywords   关键词
  • author   作者名
  • license   项目要发行的时候需要的证书

​

index.js文件代码

在项目文件中新建一个index.js文件，然后再里面编写以下代码：

//定义两数相加的方法
function Add(firstNum, endNum) {
    console.log(firstNum+ endNum);
}

//将方法暴露出去
module.exports = {
    Add,
    AddEightAndNine: function () {
        Add(8, 9);
    }
}

README.md

基本上每一个npm包都会有相关的介绍，来告诉使用者这个文件的信息以及如何安装使用,当然我们这个npm包也不例外

新建一个README.md文件，填写其相关信息

# m-adds

传入两个任意数字，计算这两个数之和并返回

## 下载

```
npm install m-adds
或者
yarn add m-adds
```

有时候我们会看到一些npm包会有很漂亮图标，我们可以去shields.io/ 制作

进入该网站，往下翻，依次输入文字，版本号，颜色，然后点击按钮就会转到图片的访问地址​

 ​

 此时我们再来更改一下README.md文件的内容

# m-adds
//使用上面创建的图标
[!npm version]
(https://img.shields.io/badge/npm-1.0.0-brightgreen)

传入两个任意数字，计算这两个数之和并返回

## 下载

```
npm install m-adds
或者
yarn add m-adds
```

发布npm包

npm包中的代码编写完成之后，我们就需要将这个npm包发布出去才能供其他人使用

注册

首先我们需要去npm的官网注册一个账号，www.npmjs.com/ ，然后在cmd上面输入

npm adduser

 输入自己的用户名，密码和邮箱（输入密码时是正常输入的，只是自己看不到）

注意：此处如果有错误，有可能是因为你的npm用的是淘宝镜像，才导致的无法登录成功

我们可以安装一个nrm（npm镜像管理工具，可以切换镜像源）

npm i nrm -g   //-g是全局安装
nrm use npm

或者直接切换到初始的镜像源

//全局切换官方镜像源
npm config set registry http://www.npmjs.org

​

登录成功，输入

npm whoami

如果显示出了自己的用户名，那么就说明登录成功了

​

发布

在上面一系列的注册登录的操作之后，我们就可以将npm包发布上去了

输入以下代码即可发布成功

npm publish

​

下载使用

npm包发布成功之后，我们就来下载下来看能不能使用

同样的我们可以再重新创建一个文件夹，里面只新建一个index.js来写代码，接着下载我们编写的npm包

输入以下代码，安装我们先前编写的npm包

npm i m-adds

index.js的文件编写

因为包中的方法是暴露出去的，引用时有ES5和ES6的不同写法，这里两种写法都会讲一下

  • ES5写法

首先需要在package.json中添加以下代码才可以使用ES5中的require方式引入

（当然若没有type配置则默认是ES5）

"type": "commonjs"

​

//起个名字adds
var adds = require('m-adds')

//使用里面暴露出去的两个方法
adds.Add(14, 17)
adds.AddEightAndNine()

  • ES6写法

此处也是需要在package.json中添加以下代码才可以使用ES6中的import方式引入

"type": "module"

​

import { Add } from "m-adds"

Add(16, 17)

再打卡终端，输入以下命令，来运行上面代码

node .\index.js


//输出结果为
//31
//17

这样就编写好了一个可以实现两个数相加的npm包，然后可以根据这样的流程编写其他功能的npm包，并且上传、下载、使用

avatar
文章
阅读
粉丝