胖蔡说技术
随便扯扯

浅谈发布自己的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小时候可以删除,超过就不行了)等操作。
缺点:没有说明文件,过于简陋,下次我们在尝试一下发布正常一点的包 ? ? ?

赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » 浅谈发布自己的npm包
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏