浅谈发布自己的npm包

source/_posts/浅谈发布自己的npm包（一）.md

+<a name="Hq4wx"></a>
+## 前景
+在开发过程中，你可能会遇到不同的项目但是用到了相同的组件或者方法等，如果把代码再复制一遍显示不是很好的做法，而推荐的做法是把自己经常用到的组件或方法发布成npm包。平时我们也会使用各种各样的npm包，正好这次我们一起尝试一下如何去发布一下自己的包~
+<a name="D701t"></a>
+## 注册
+先去[官网](https://www.npmjs.com/signup)注册一个npm 的账号,这里几乎是傻瓜式的操作，我们添加名称、密码、即可。<br />我主要说一个有点意思的：<br />注册成功，登录进去后，点击**Account，**看到 Two-Factor Authentication，这就是我们要说的东西。<br />解释一下就是 【双重身份验证】,这个东西你开不开都行，官方是建议开的，如果开启后面发布更新之类的就输入这个就行了。<br />![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 如果你上面没有去配置身份双重检验，邮箱里会有收到，输入进来就可以了。<br />**这里可能会遇见报错：403**<br />![5.png](/yifu-study-front-share/images/npm/npm1.5.png)<br />这是因为平时开发用的是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)<br/>![7.png](/yifu-study-front-share/images/npm/npm1.7.png)<br />一个简陋的js包好了，我们来使用验证一下。
+<a name="bFvOv"></a>
+#### 7. 使用
+就和正常的npm 安装使用一样。
+```jsx
+npm i zfl-npm-js
+```
+![image.png](/yifu-study-front-share/images/npm/npm1.8.png)<br />![image.png](/yifu-study-front-share/images/npm/npm1.9.png)<br />好了我们一个简陋的npm包可以了，你可以升级（升级一定记得把版本号改一下！！！不能同版本号）、删除（好像是24小时候可以删除，超过就不行了）等操作。<br />缺点：没有说明文件，过于简陋，下次我们在尝试一下发布正常一点的包 🌻 🌻 🌻
+
+