source/_posts/浅谈发布自己的npm包（一）.md · 易服智享前端组/yifu-study-front-share

---
title: 浅谈发布自己的npm包（一）       
date: 2022/9/20 16:53:00
tags:                    
- npm
- webpack           
author: 张芳利        
---

<a name="Hq4wx"></a>
## 前景
在开发过程中，你可能会遇到不同的项目但是用到了相同的组件或者方法等，如果把代码再复制一遍显示不是很好的做法，而推荐的做法是把自己经常用到的组件或方法发布成npm包。平时我们也会使用各种各样的npm包，正好这次我们一起尝试一下如何去发布一下自己的包~
<a name="D701t"></a>
## 注册
先去[官网](https://www.npmjs.com/signup)注册一个npm 的账号,这里几乎是傻瓜式的操作，我们添加名称、密码、即可。 我主要说一个有点意思的： 注册成功，登录进去后，点击**Account，**看到 Two-Factor Authentication，这就是我们要说的东西。 解释一下就是 【双重身份验证】,这个东西你开不开都行，官方是建议开的，如果开启后面发布更新之类的就输入这个就行了。 ![1.png](/yifu-study-front-share/images/npm/npm1.1.png)

1. 我们点击Enable 2FA 进到校验页面，有两个校验选项，显然我们要选择第二种。他的意思就是使用应用程序获取验证码来进行验证。这个软件就是**Authenticator，**因为我是苹果手机直接在应用商场搜索下载的，安卓的话应该也有这个app，你可以试试

![2.png](/yifu-study-front-share/images/npm/npm1.2.png)

2. 点击上图的继续，我们会看到一个二维码的页面，用我们刚才下载的软件，选择扫描二维码，你的手机上就会出现6位数字，不用记，它是不停变化的。

![3.png](/yifu-study-front-share/images/npm/npm1.3.png)

3. 把我们看到的数字输入进去，继续点击确定，就可以了。

![4.png](/yifu-study-front-share/images/npm/npm1.4.png)
<a name="nnJtO"></a>
## 发布第一个包
好了，我们来尝试发布一个简单的js函数
<a name="gY86M"></a>
#### 1. 创建
```jsx
$ mkdir zfl-npm-js
$ cd zfl-npm-js
$ npm init -y //默认设置，如果不默认自己设置去掉 -y
```
<a name="FE23f"></a>
#### 2. package.json 
这时我们创建的zfl-npm-js 文件里有一个package.json 文件
```jsx
{
 "name": "zfl-npm-js",
 "version": "1.0.0", //版本
 "description": "", 
 "main": "index.js", //入口，可根据实际情况更改
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}
```
<a name="jEJDI"></a>
#### 3. 函数
在项目中创建src/index.js,记得在上面的package.json 中也要改一下入口哦，我们写一个简单的加法函数
```jsx
export function add(a,b){
 // 判断a,b是否为数字
 if(typeof a !== 'number' || typeof b !== 'number'){
 throw new Error('a and b must be number')
 }
 return a + b
}
```
<a name="i0msZ"></a>
#### 4. webpack 打包 
```jsx
npm install --save-dev webpack webpack-cli
```
根目录创建一个webpack.config.js，进行配置
```jsx
const path = require('path');
 
module.exports = {
 mode: 'production',
 entry: './src/index.js',
 output: {
 path: path.resolve(__dirname, 'dist'),
 filename: '[name].js',
 library: 'zfl-npm-js', // 全局挂载包的引用名
 libraryTarget: 'umd', //通用模式：支持用户通过es、common.js、AMD的方式引入npm包
 globalObject: 'this', // node 等环境运行时需要设置为 this
 libraryExport:'default' //默认导出
 }
}
```
<a name="CLJHm"></a>
#### 5. 登录npm 
```jsx
npm login //输入用户名 密码 邮箱 opt等 
```
关于opt 如果你上面没有去配置身份双重检验，邮箱里会有收到，输入进来就可以了。 **这里可能会遇见报错：403** ![5.png](/yifu-study-front-share/images/npm/npm1.5.png) 这是因为平时开发用的是cnpm,这里需要执行一下
```jsx
npm config set registry https://registry.npmjs.org/
```
就可以了。
<a name="BzMze"></a>
#### 6. 上传发布包 
```jsx
npm publish

```
![6.png](/yifu-study-front-share/images/npm/npm1.6.png) ![7.png](/yifu-study-front-share/images/npm/npm1.7.png) 一个简陋的js包好了，我们来使用验证一下。
<a name="bFvOv"></a>
#### 7. 使用
就和正常的npm 安装使用一样。
```jsx
npm i zfl-npm-js
```
![image.png](/yifu-study-front-share/images/npm/npm1.8.png) ![image.png](/yifu-study-front-share/images/npm/npm1.9.png) 好了我们一个简陋的npm包可以了，你可以升级（升级一定记得把版本号改一下！！！不能同版本号）、删除（好像是24小时候可以删除，超过就不行了）等操作。 缺点：没有说明文件，过于简陋，下次我们在尝试一下发布正常一点的包 🌻 🌻 🌻

易服智享前端组/yifu-study-front-share

About

Releases

Contributors

Activities