新手如何开发和发布npm包

646 阅读3分钟

写在前面

笔者是第一次写技术文档,接下来有空会继续创作,意在帮助各位前端新手更快了解nodejs和JavaScript。有什么不好或者不对的地方,希望各位大牛指教。话不多说,现在开始。

准备

node & npm

首先,电脑里必须安装nodejs,npm。执行node -v,npm -v查看版本。

npm账户

www.npmjs.com/ 还没有npm账户的同学,可以点击这个网站进行注册。这个npm账号是必须注册的,发不了包的。

创建一个包

创建一个新的文件夹

mkdir npm-demo

cd npm-demo

注意:不熟悉命令行操作的同学,当然可以使用用户界面进行操作。

然后在vscode中打开

初始化包

npm init -y 执行这条命令可以帮助您初始化package.json,这个文件是一个配置文件,我们打开一个包的时候,通常 第一眼就是去看它,通常看它的描述,入门文件是哪个。它有很多配置,不懂的同学可以搜一下它的配置,以后有时间我再整理一下关于package.json配置文件的文档。

此时可以在项目根目录中看到多了一个叫package.json文件

实现包的逻辑

在根目录下新建一个文index.js,这个文件就是入口文件,在package.json文件中的main字段可以查看入口文件。该例子为了简单演示,尽量简单,所有的逻辑都写在index.js文件之内。 首先,安装所需要的依赖,npm i chalk,此时根目录会自动生成node_modules文件夹和package-lock.json,在这里你先不要管它们的所有。具体代码如下所示。

const { red, green, yellow } = require('chalk')

class Logger {
    constructor(isDebug = true) {
        this.isDebug = isDebug
    }

    log(...args) {
        this.isDebug && this._print(args, green)
    }

    warn(...args) {
        this.isDebug && this._print(args, yellow)
    }

    error(...args) {
        this.isDebug && this._print(args, red)
    }

    _print(args, colorFn) {
        args.forEach((arg, i) => {
            if(this._isBaseType(arg)) {
                args[i] = colorFn(arg)
            }
        })
        console.log(...args)
    }

    _isBaseType(type) {
        const baseType = ['string', 'number', 'boolean', 'undefined']
        return baseType.includes(typeof type) || type === null
    }
}

module.exports = Logger

到此为止,这个包就创建好了。 package.json文件如下所示。

{
  "name": "whj-logger",
  "version": "0.0.1",
  "description": "a debug tools",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.0"
  }
}

测试

如何在不发布这个包的情况下,测试这个包呢?

执行npm link

该操作会在本地的全局目录下软连接这个包,这时候你的电脑可以通过npm link <packagesName>安装这个包到生产依赖。当然你现在还没有发布,所以网路上并没有你这个包, 并不能通过npm i下载。你可以通过执行npm unlink取消这个包的软连接。

新建一个文件夹测试这个包

首先,保证你软连接了这个包。

新建一个空文件夹npm-demo-test

执行npm link whj-logger

在根目录新建test.js,代码如下

const Logger = require('whj-logger')

const logger = new Logger()

logger.log(1, 'name', null, undefined, true, {name: 'hj'})
logger.warn(1, 'name', null, undefined, true, {name: 'hj'})
logger.error(1, 'name', null, undefined, true, {name: 'hj'})

执行结果如下:

发布npm包

登录

npm login,此时要注意一个坑,输入密码的时候,控制台不会有任何响应,这是正常的,只要你正确输入密码就直接回车。还有,必须填一个邮箱地址。 npm publish 注意:

  1. 发布npm包时,npm的地址必须指向 registry.npmjs.org/ ,如果不是,可以通过执行下面这条命令改变npm地址。

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

有下载nrm的同学可以通过nrm ls查看当前指向的地址。 执行nrm use npm切换地址。

  1. 发布这个包时,包名不许跟其他已有包名一样。

此时就可以在www.npmjs.com/ 查看自己发的包了。

结语

匆匆忙忙,写的不好的地方见谅。

**gitee:**gitee.com/lin_rong121…