工作中常用的npm包

ermaoL 發布于2019-08-23 18:02 / 2403人閱讀

摘要：工具類工具庫，封裝了處理，，，等常見的函數，是對標準庫的補充。業務開發中常用的函數有很多，如等。示例如下整數處理保留兩位小數百分比處理億億處理萬萬處理格式化數字大于億的展示為億，大于萬的展示為萬億萬時間處理庫。

工具類 lodash

工具庫，封裝了處理arrays，numbers，objects，string等常見的函數，是對標準庫的補充。業務開發中常用的函數有很多，如：assign, times, debounce, get, find, filter, keyBy, cloneDeep, groupBy, omit, pick等。示例如下：

const _ = require("lodash");

const obj = {
    name: "zhangsan",
    age: 20,
    friends: [{
        name: "lisi",
        age: 18
    }, {
        name: "wanger",
        age: 19
    }]
};

// 深復制，等價于JSON.parse(JSON.stringify(obj))，但是JSON.parse的形式無法復制函數
const obj2 = _.cloneDeep(obj); 
obj === obj2; // false

// 深獲取屬性，業務開發中可以取代if(a && a.b && a.b.c)的形式
_.get(obj, "friends[0].age", 0); // 18

// extend properties
_.assign({}, {
    name: "zhangsan"
}, {
    age: 20
}); // { name: "zhangsan", age: 20 }

// remove properties
_.omit({
    name: "zhangsan",
    age: 20
}, ["age"]); // { name: "zhangsan"}

// pick properties
_.pick({
    name: "zhangsan",
    age: 20
}, ["age"]); // { age: 20}

const arr = [{
        name: "zhangsan",
        age: 20
    },
    {
        name: "lisi",
        age: 19
    },
    {
        name: "wanger",
        age: 18
    }
];

_.keyBy(arr, "name"); // { zhangsan: { name: "zhangsan", age: 20 }, lisi: { name: "lisi", age: 19 }, wanger: { name: "wanger", age: 18 } }

// debounce(消抖，停止的時候執行一次)和throttle(節流，每間隔一定時候執行一次)
_.debounce(keyword => {
    console.log(keyword);
}, 500);

// N loop
_.times(6, _.uniqueId.bind(null, "key_")); // [ "key_1", "key_2", "key_3", "key_4", "key_5", "key_6" ]

// 安全的JSON.parse
function safeParse(str, defaultValue) {
    let result = _.attempt(function(str) {
        return JSON.parse(str)
    }, str)

    return _.isError(result) ? defalutValue : result
}

safeParse(JSON.stringify({
    a: 1
}), {}); // { a: 1 }

is-type-of

js類型判斷庫，可判斷js中的類型，包括promise，generator等。示例如下：

is.array([1]) // => true
is.null(null) // => true
is.undefined(undefined) // => true
is.object({a: 1}) // => true

numeral

格式化處理數字。示例如下：

const TEN_THOUSANDS = 10000
const HUNDRED_MILLION = 100000000

numeral(345333).format("0,0’) => ‘345,333’ // 整數處理
numeral(3.45333).format("0.00’) => ‘3.45"   // 保留兩位小數
numeral(0.9756).format("0.00%’) => ’97.56%’ // 百分比處理

numeral(14321235334343).divide(HUNDRED_MILLION).format("0,0.00’) => ‘143,212.35億’ //億處理
numeral(143212353).divide(TEN_THOUSANDS).format("￥0,0.00") => "14,321.24"萬 //萬處理

// 格式化數字, 大于億的展示為億，大于萬的展示為萬...
formatNum() {
    if(number > HUNDREND_MILLION) {
        return numeral(number).divide(HUNDREND_MILLION).format(‘0,0.00’) + ‘億"
    } else if(number > TEN_THOUSANDS) {
        return numeral(number).divide(TEN_THOUSANDS).format(‘0,0.00’) + ‘萬"    
    } else {
        return numeral(number).format(‘0,0.00")
    }
}

moment.js/day.js

時間處理庫。示例如下：

moment().format(‘YYYY-MM-DD")

Excel處理 json文件轉excel文件

excel-export庫，基于node.js將數據生成excel文件，生成格式為xlsx。

// json轉excel
const nodeExcel = require("excel-export");
const _ = require("lodash");
const fs = require("co-fs");
const co = require("co");
/** 
 * 使用場景:
 * 導出Excel
 * 
 * 用法:
 * params:
 *  - name: excel文件名稱
 *  - path: 導出的excel路徑
 * 
 * rows:
 * [
 *    {
 *      name: ""
 *      _created_at: ""
 *    },
 * .....
 * ]
 * 
 * cols:
 * [
 *   {
 *     key: "name",
 *     text: "名稱"
 *   },
 *   {
 *     key: "_created_at",
 *     text: "提交時間",
 *     filter: dateStr => {
 *        return dateStr.length === 0 ? dateStr : dateStr.split(".")[0].replace("T", " ");
 *     }
 *   }
 * ];
 */
function wrapConf(rows, cols) {
    let conf = {};
    conf.name = "sheet1";
    conf.cols = cols.map(item => {
        return {
            caption: item.text,
            type: item.type || "string",
            width: item.width || 20
        };
    });

    conf.rows = rows.map((row) => {
        return cols.map((col) => {
            if (col.filter) {
                return col.filter(_.get(row, col.key), row);
            } else {
                return _.get(row, col.key);
            }
        });
    });

    return conf;
}

function* exportExcel(path, rows, cols) {
    let conf = wrapConf(rows, cols); // 配置項
    let result = nodeExcel.execute(conf); // 導出excel
    return yield fs.writeFile(path, result, "binary"); // 寫入到路徑
}

module.exports = exportExcel;

excel文件轉json文件

js-xlsx庫，讀取和解析多種格式表格的js庫。

// excel轉json
const fs = require("co-fs");
const co = require("co");
const XLSX = require("xlsx");
// {
//     SheetNames: ["sheet1", "sheet2"],
//     Sheets: {
//         // worksheet
//         "sheet1": {
//             // cell
//             "A1": { ... },
//             // cell
//             "A2": { ... },
//             ...
//         },
//         // worksheet
//         "sheet2": {
//             // cell
//             "A1": { ... },
//             // cell
//             "A2": { ... },
//             ...
//         }
//     }
// }
function toJson(workbook, keys) {
    let result = {};
    let sheetNames = workbook.SheetNames;
    sheetNames.forEach(sheetName => {
        let worksheet = workbook.Sheets[sheetName];
        result[sheetName] = XLSX.utils.sheet_to_json(worksheet, {
            header: keys
        });
    });

    return result;
};
/**
 * 
 * 
 * @param {any} src: excel文件地址
 * @param {any} dest: 導出json文件地址
 * @param {any} keys: excel列名映射到json的keys 
 * @returns 
 */
function* excelToJson(src, dest, keys) {
    let data = yield fs.readFile(src)
    let json = toJson(XLSX.read(data))
    return yield fs.writeFile(dest, JSON.stringify(json, 2, 2))
}

module.exports = excelToJson;

Markdown

markdown文件轉html文件，使用marked-toc(生成文件目錄)，marked(markdown解析庫)，hightlight(代碼高亮)。

const md5 = require("md5");
const markedToc = require("marked-toc");
const marked = require("marked");
const highlight = require("highlight");
const fs = require("fs");

function generateTocName(name) {
    name = name.trim().replace(/s+/g, "").replace(/)/g, "").replace(/[(,]/g, "-").toLowerCase();
    if (/^[w-]+$/.test(name)) {
        return name;
    }

    return `toc-${md5(name).slice(0, 3)}`;
}

// filePath為markdown文件目錄
function markdownToHtml(filePath) {
    let content = fs.readFileSync(filePath, "utf8");

    let tocContent = marked(markedToc(content)).replace(/([^<>]+)/g, (a, b, c) => {
        return `${c}`;
    });

    let markedContent = marked(content).replace(/]*>(.*?)/g, (a, b, c) => {
        if (b == 2) {
            return `${c}`;
        }
        return `${c}`;
    });
    markedContent = markedContent.replace(/]*>([^<>]+)/, (a, b, c) => {
        return `${a}${tocContent}`;
    });

    let highlightContent = markedContent.replace(/([sS]+?)/mg, (a, language, text) => {
        text = text.replace(/'/g, """).replace(/>/g, ">").replace(/${result.value}

`; }); return highlightContent; }

GPU云服務器云服務器在npm 包 coa 和 rc 中發現惡 NPM包管理器 linux系統中的常用命令云主機在我們工作中的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104568.html

npm常用命令集合

摘要：簡介，通常稱為包管理器。的背后，是基于的一個數據庫，詳細記錄了每個包的信息，包括作者版本依賴授權信息等。它的一個很重要的作用就是將開發者從繁瑣的包管理工作版本依賴等中解放出來，更加專注于功能的開發。 0 NPM簡介 NPM（node package manager），通常稱為node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索等。npm的背后，...

Kahn 2019-08-22 15:52 評論0 收藏0
npm常用命令及參數詳解

摘要：本人菜鳥一枚，一直也沒理解這個，不過看到了就記錄一下吧，萬一哪天用到了，說不準就懂了或參數的意思是精確的安裝指定版本的模塊，細心的同學會發現字段里每個模塊版本號前面的不見鳥。。。 NPM命令詳解平時工作中經常用npm安裝，每次用的時候有些命令都要去查一次，這次就自己把這些命令整理下，讓自己可以多記住一些。對于還不知道NPM是什么的同學請自行google吧這里我就不多BB了，主要記錄...

DevWiki 2019-08-21 17:43 評論0 收藏0
Laravel 和 Vue 的項目搭建：基礎篇

摘要：此項目前端使用框架，加上這些常用擴展后的其中還加入了加載器解析工具前端動畫等，不需要的可以自行刪除。沒有的，需要設置淘寶鏡像，下載的是國外的鏡像，速度慢而且可能出現下載失敗的問題。本篇只是實現了基礎的功能，對于實際的項目中的權限等還未涉及，這些會在后期逐步完善。相關項目 laravel-vue-iview 的 GitHub 地址戳這里，此項目基本可用于實際開發工作。 Lara...

jiekechoo 2019-06-28 18:24 評論0 收藏0
npm常用指令

摘要：關于的一些東西命令行窗口常用的指令列出當前目錄下的所有文件目錄名進入到指定的目錄目錄名創建一個文件夾目錄名刪除一個文件夾目錄表示當前目錄表示上一級目錄的命令作用查看的版本作用查看所有模塊的版本包名作用搜索包包名作用安裝包包名作用刪除包關于npm的一些東西 .命令行窗口 - 常用的指令： dir 列出當前目錄下的所有文件 cd 目錄名進入到指定的目錄 md...

taowen 2019-07-01 11:17 評論0 收藏0
TCM的webpack配置與常用插件

摘要：中的配置熱加載插件安裝中的配置優化插件為組件分配，通過這個插件可以分析和優先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言本文是針對TCM項目所做的WebPack配置文件總結，主要概述了一些常用配置選項和插件使用，對以后的項目有指導意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

羅志環 2019-08-20 14:36 評論0 收藏0