前言

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

步骤

  • 创建账号

点击进入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>

总结


w候人兮猗
143 声望3 粉丝