实现一个自己的日志处理库并发布到npm

w候人兮猗

发布于 2020-07-01 15:30:48

3970

发布于 2020-07-01 15:30:48

文章被收录于专栏：w候人兮猗的博客

Contents

前言

不折腾的前端不是一个好的前端，最近在搭建公司内部工具以及组件库，使用npm进行管理，所以学习一下如何创建一个属于自己的JavaScript库，并发布成npm模块。
https://github.com/ahwgs/console-util

步骤

创建账号

点击进入npm官网右上角进行注册

创建项目

一路回车或者根据内容填写相关信息后，项目就创建好了。

package.json内容如下:

新建index.js文件

(function (root, factory) {
    'use strict';
    if(typeof define === 'function' && define.amd){
        define('log', [], factory);
    }else{
        root['log'] = factory();
    }
})(this ? this : window, function(){

    'use strict';

    const OFF = Number.MAX_VALUE;

    const DEBUG = 10;

    const INFO = 20;

    const WARN = 30;

    const ERROR = 40;


    function LogUtil(){
        this.consoleLog = window.console;
        this._level = OFF;
    }

    LogUtil.prototype.setLevel = function(level){
        if(!level){
            return;
        }
        level = String(level).toLowerCase();
        if(level === 'info'){
            level = INFO;
        }else if(level === 'warn'){
            level = WARN;
        }else if(level === 'error'){
            level = ERROR;
        }else if(level === 'debug'){
            level = DEBUG;
        }else{
            level = OFF;
        }
        this._level = level;
    };

    LogUtil.prototype.runLog = function(level, methodName, msg){
        if(!level){
            return;
        }
        var form = [new Date().toLocaleString(), level.toLowerCase(), methodName, msg].join('|');
        if(level.toLowerCase() === 'debug' && this._level <= DEBUG){
            this.consoleLog.debug(form);
        }else if(level.toLowerCase() === 'info' && this._level <= INFO){
            this.consoleLog.info(form);
        }else if(level.toLowerCase() === 'warn' && this._level <= WARN){
            this.consoleLog.warn(form);
        }else if(level.toLowerCase() === 'error' && this._level <= ERROR){
            this.consoleLog.error(form);
        }
    };

    return LogUtil;
});

到这里一个简单的包就创建好了。如果想再完善一下的话，还可以在包根目录下创建README.md文件，里面可以写一些关于包的介绍信息，最后发布后会展示在NPM官网上。

发布npm

使用终端命令行如果是第一次发布包，执行以下命令，然后输入前面注册好的NPM账号，密码和邮箱，将提示创建成功

npm adduser

如果不是第一次发布包，执行以下命令进行登录，同样输入NPM账号，密码和邮箱

npm login

注意：npm adduser成功的时候默认你已经登陆了，所以不需要再进行npm login了

接着先进入项目文件夹下，然后输入以下命令进行发布

npm publish

提示如下错误，需要去npm官网先验证管理员邮箱

后重新发布

说明已经成功

使用

添加项目依赖

npm install console-util

具体使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../release/index.js"></script>
<script>
    window.onload = function () {
        //初始化LogUtil对象
        let log = new LogUtil();
        //设置默认等级
        let level = 'info';
        //使用等级
        log.setLevel(level);
        log.runLog('warn', 'init', 'this is warn log');
        log.runLog('info', 'init', 'this is info log');
        log.runLog('debug', 'init', 'this is debug log');
        log.runLog('error', 'init', 'this is error log');
    }
</script>
</body>
</html>