浅谈发布自己的npm包

前景

在开发过程中，你可能会遇到不同的项目但是用到了相同的组件或者方法等，如果把代码再复制一遍显示不是很好的做法，而推荐的做法是把自己经常用到的组件或方法发布成npm包。平时我们也会使用各种各样的npm包，正好这次我们一起尝试一下如何去发布一下自己的包~

注册

先去官网注册一个npm 的账号,这里几乎是傻瓜式的操作，我们添加名称、密码、即可。
我主要说一个有点意思的：
注册成功，登录进去后，点击**Account，**看到 Two-Factor Authentication，这就是我们要说的东西。
解释一下就是 【双重身份验证】,这个东西你开不开都行，官方是建议开的，如果开启后面发布更新之类的就输入这个就行了。

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

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

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

发布第一个包

好了，我们来尝试发布一个简单的js函数

1. 创建

$ mkdir zfl-npm-js
$ cd zfl-npm-js
$ npm init -y  //默认设置，如果不默认自己设置去掉 -y

2. package.json

这时我们创建的zfl-npm-js 文件里有一个package.json 文件

{
  "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"
}

3. 函数

在项目中创建src/index.js,记得在上面的package.json 中也要改一下入口哦，我们写一个简单的加法函数

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
}

4. webpack 打包

npm install --save-dev webpack webpack-cli

根目录创建一个webpack.config.js，进行配置

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'   //默认导出
    }
}

5. 登录npm

npm login //输入用户名 密码 邮箱 opt等 

关于opt 如果你上面没有去配置身份双重检验，邮箱里会有收到，输入进来就可以了。
这里可能会遇见报错：403

这是因为平时开发用的是cnpm,这里需要执行一下

npm config set registry https://registry.npmjs.org/

就可以了。

6. 上传发布包

npm publish

一个简陋的js包好了，我们来使用验证一下。

7. 使用

就和正常的npm 安装使用一样。

npm i zfl-npm-js

好了我们一个简陋的npm包可以了，你可以升级（升级一定记得把版本号改一下！！！不能同版本号）、删除（好像是24小时候可以删除，超过就不行了）等操作。
缺点：没有说明文件，过于简陋，下次我们在尝试一下发布正常一点的包 ? ? ?