【總結(jié)】1350- 分享 50 個提升開發(fā)效率的前端倉庫

總結(jié)下今年用到的一些有意思的《js輪子》（只是大概列出些比較有意思的庫，每個標題下都是超鏈接，可點擊自行查閱） 希望能對您有用！如有意思的 輪子 可以在評論列出一起討論下

color

https://www.npmjs.com/package/color

==功能==：JavaScript庫，用于不可變的顏色轉(zhuǎn)換和對CSS顏色字符串的支持。

npm install color

var color = Color('###7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string());  // 'hsla(262, 59%, 81%, 0.5)'
 
console.log(color.cmyk().round().array());  // [ 16, 25, 0, 8, 0.5 ]
 
console.log(color.ansi256().object());  // { ansi256: 183, alpha: 0.5 }

uuidjs

https://www.npmjs.com/package/uuidj

==功能==：UUID.js-JavaScript的RFC兼容UUID生成器

// Create a version 4 (random number-based) UUID object
var objV4 = UUID.genV4();
 
// Create a version 1 (time-based) UUID object
var objV1 = UUID.genV1();
 
// Create a UUID object from a hexadecimal string
var uuid = UUID.parse("a0e0f130-8c21-11df-92d9-95795a3bcd40");
 
// Get string representations of a UUID object
console.log(uuid.toString());   // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
console.log(uuid.hexString);    // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
console.log(uuid.hexNoDelim);   // "a0e0f1308c2111df92d995795a3bcd40"
console.log(uuid.bitString);    // "101000001110000 ... 1100110101000000"
console.log(uuid.urn);          // "urn:uuid:a0e0f130-8c21-11df-92d9-95795a3bcd40"
 
// Compare UUID objects
console.log(objV4.equals(objV1));   // false
 
// Get UUID version numbers
console.log(objV4.version); // 4
console.log(objV1.version); // 1
 
// Get internal field values in 3 different forms via 2 different accessors
console.log(uuid.intFields.timeLow);                // 2699096368
console.log(uuid.bitFields.timeMid);                // "1000110000100001"
console.log(uuid.hexFields.timeHiAndVersion);       // "11df"
console.log(uuid.intFields.clockSeqHiAndReserved);  // 146
console.log(uuid.bitFields.clockSeqLow);            // "11011001"
console.log(uuid.hexFields.node);                   // "95795a3bcd40"
 
console.log(uuid.intFields[0]);                     // 2699096368
console.log(uuid.bitFields[1]);                     // "1000110000100001"
console.log(uuid.hexFields[2]);                     // "11df"
console.log(uuid.intFields[3]);                     // 146
console.log(uuid.bitFields[4]);                     // "11011001"
console.log(uuid.hexFields[5]);  

rc-upload

https://www.npmjs.com/package/rc-upload

==功能==：文件上傳下載拖拽文件 及文件夾等

var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);

react-copy-to-clipboard

https://www.npmjs.com/package/react-copy-to-clipboard

==功能==：react 復(fù)制粘貼

npm install --save react react-copy-to-clipboard


import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
 
class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };
 
  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>
 
        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}
 
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

numeral

http://numeraljs.com/

==功能==：一個用于格式化和處理數(shù)字的javascript庫。

var value = myNumeral.value();
// 1000

var myNumeral2 = numeral('1,000');

var value2 = myNumeral2.value();
// 1000

omit.js

https://www.npmjs.com/package/omit.js

==功能==：返回 在目標對象中 omit[刪除; 忽略] 指定屬性的對象; 實用程序功能，用于創(chuàng)建刪除了某些字段的對象的淺表副本。

npm i --save omit.js

omit(obj: Object, fields: string[]): Object


var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 

Moment.js

https://momentjs.com/

==功能==：一個JavaScript日期庫，用于解析，驗證，操作和格式化日期。

moment().format('MMMM Do YYYY, h:mm:ss a'); // December 22nd 2020, 10:55:15 am
moment().format('dddd');                    // Tuesday
moment().format("MMM Do YY");               // Dec 22nd 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();      

Day.js

https://github.com/iamkun/dayjs/blob/HEAD/docs/zh-cn/README.zh-CN.md

==功能==：Day.js 是一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設(shè)計保持完全一樣. 如果您曾經(jīng)用過 Moment.js, 那么您已經(jīng)知道如何使用 Day.js

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示

dayjs()
  .set('month', 3)
  .month() // 獲取

dayjs().add(1, 'year') // 處理

dayjs().isBefore(dayjs()) // 查詢

milliseconds

https://github.com/HenrikJoreteg/milliseconds

==~~~~功能==：用于將時間轉(zhuǎn)換為毫秒。

var ms = require('milliseconds');

ms.seconds(2); // 2000
ms.minutes(2); // 120000
ms.hours(2);   // 7200000
ms.days(2);    // 172800000
ms.weeks(2);   // 1209600000
ms.months(2);  // 5259600000
ms.years(2);   // 63115200000

filesize

https://www.npmjs.com/package/filesize

==功能==：filesize.js提供了一種簡單的方法來從數(shù)字（浮點數(shù)或整數(shù)）或字符串中獲取人類可讀的文件大小字符串。

npm i filesize


filesize(500);                        // "500 B"
filesize(500, {bits: true});          // "4 Kb"
filesize(265318, {base: 10});         // "265.32 kB"
filesize(265318);                     // "259.1 KB"
filesize(265318, {round: 0});         // "259 KB"
filesize(265318, {output: "array"});  // [259.1, "KB"]
filesize(265318, {output: "object"}); // {value: 259.1, symbol: "KB", exponent: 1}
filesize(1, {symbols: {B: "Б"}});     // "1 Б"
filesize(1024);                       // "1 KB"
filesize(1024, {exponent: 0});        // "1024 B"
filesize(1024, {output: "exponent"}); // 1
filesize(265318, {standard: "iec"});  // "259.1 KiB"
filesize(265318, {standard: "iec", fullform: true}); // "259.1 kibibytes"
filesize(12, {fullform: true, fullforms: ["байтов"]});  // "12 байтов"
filesize(265318, {separator: ","});   // "259,1 KB"
filesize(265318, {locale: "de"});   // "259,1 KB"

react-markdown

https://www.npmjs.com/package/react-markdown

==功能==：使用備注的React的Markdown組件。

import { Row, Col, Menu, Affix, Anchor } from 'antd';
import ReactMarkdown from 'react-markdown/with-html';
import { isEmpty } from "lodash";

import HeadBlock from './HeadBlock';

import 'github-markdown-css/github-markdown.css'
import './index.less';

const { Link } = Anchor;

const articles = {
  '1': '/developer_guide.md',
  '2': '/user_manual.md'
}


/**
 *
 * @param lists
 * 這里只做兩級處理
 */
export const navsToTree = (lists: any[]) => {
  if (isEmpty(lists)) return [];
  // 提取第一個level為最大level 后續(xù)比他大的一律為同級
  const maxLevel = lists[0].level;
  const newLists: any[] = [];
  lists.forEach((item: any) => {
    // 一級 同級
    if (item.level <= maxLevel) {
      newLists.push(item)
    } else {
      // 非同級
      if (newLists[newLists.length - 1].children) {
        newLists[newLists.length - 1].children.push(item)
      } else {
        newLists[newLists.length - 1].children = [item]
      }
    }
  })
  return newLists;
}



const NormalTest: React.FC<any> = () => {

  const [currentArticle, setCurrentArticle] = useState<{ url: string, content: any }>({ url: '', content: '' });

  const [treeNavs, setTreeNavs] = useState<any[]>([])

  // 初始為開發(fā)文檔
  useEffect(() => {
    // console.log(1);

    changeCurrentArticle(articles['1'])
  }, [])

  // 這里是根據(jù)文檔修改進行獲取目錄
  useEffect(() => {
    /**
     *  獲取所有的文章標題
     */
      // console.log(currentArticle);

    const markdownNavs = document.querySelectorAll('.article-nav')
    const navs: any[] = [];
    markdownNavs.forEach((item: any) => {
      const level = item.getAttribute('data-level');
      const value = item.textContent;
      const nodeKey = item.id;
      navs.push({ level, value, nodeKey })
    })
    transArticleNavs(navs)

  }, [currentArticle.content])

  // 更改當前文檔
  const changeCurrentArticle = async (url: string) => {
    const res = await fetch(url);
    const content = await res.text();
    setCurrentArticle({ ...currentArticle, content, url })
  }

  // 書籍導(dǎo)航點擊
  const menuOnClick = (e: any) => {
    const url = articles[e.key]
    changeCurrentArticle(url)
  }

  // 轉(zhuǎn)換為文章右側(cè)目錄
  const transArticleNavs = (navs: any) => {

    // 轉(zhuǎn)換為二級導(dǎo)航
    const treedevelopDocs = navsToTree(navs);
    setTreeNavs(treedevelopDocs)

  }

  return (
    <>
      <Row className='articles'>
        <Col flex='200px' className="articles-list">
          <Affix offsetTop={24}>
            <Menu defaultSelectedKeys={['1']} onClick={menuOnClick} theme='light'>
              <Menu.Item key="1">開發(fā)文檔</Menu.Item>
              <Menu.Item key="2">使用文檔</Menu.Item>
            </Menu>
          </Affix>

        </Col>
        <Col flex='1' className='articles-content'>
          <div className='articles-content_wrpper'>
            <ReactMarkdown
              className="markdown-body"
              source={currentArticle.content}
              escapeHtml={false}
              renderers={{
                heading: HeadBlock
              }}
            />
          </div>
        </Col>
        <Col flex='200px' className="articles-menu">
          <Affix offsetTop={20} >
            <Anchor style={{ width: 160 }}>
              {
                treeNavs.map((item: any) => {
                  if (item.children) {
                    return (
                      <Link href={`###${item.nodeKey}`} title={item.value} key={item.nodeKey}>
                        {
                          item.children.map((childItem: any) => (
                            <Link href={`###${childItem.nodeKey}`} title={childItem.value} key={childItem.nodeKey} />
                          ))
                        }
                      </Link>
                    )
                  } else {
                    return (
                      <Link href={`###${item.nodeKey}`} title={item.value} key={item.nodeKey} />
                    )
                  }
                })
              }
            </Anchor>
          </Affix>
        </Col>
      </Row>
    </>
  );
};

export default NormalTest;

import React from 'react';

const HeadBlock = (props) => {

  const { level, children } = props;
  const { nodeKey } = children[0].props;

  return (
    <>
      {React.createElement(`h${level}`, { className: 'article-nav', id: nodeKey, 'data-level': level }, children)}
    </>
  );
}

export default HeadBlock;

cytoscape | cytoscape-dagre

https://www.npmjs.com/package/cytoscape

==功能==：Cytoscape.js是功能齊全的圖論庫。您是否需要對關(guān)系數(shù)據(jù)進行建模和/或可視化，例如生物數(shù)據(jù)或社交網(wǎng)絡(luò)？如果是這樣，Cytoscape.js就是您所需要的。Cytoscape.js包含一個圖形理論模型和一個用于顯示交互式圖形的可選渲染器。該庫旨在使程序員和科學(xué)家盡可能輕松地在其應(yīng)用程序中使用圖論，無論是用于Node.js應(yīng)用程序中的服務(wù)器端分析還是用于豐富的用戶界面。

Lodash

https://www.npmjs.com/package/lodash

==功能==：函數(shù)工具類庫

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

patch-package node

https://www.npmjs.com/package/patch-package

==功能==：npm yran 補丁,用于改node_modules

cross-env node

https://www.npmjs.com/package/cross-env

==功能==：cross-env這是一款運行跨平臺設(shè)置和使用環(huán)境變量的腳本。

npm install --save-dev cross-env
{
  "scripts": {
    "parentScript": "cross-env GREET=\"Joe\" npm run childScript",
    "childScript": "cross-env-shell \"echo Hello $GREET\""
  }
}

bignumber.js

https://www.npmjs.com/package/bignumber.js

==功能==：一個用于任意精度十進制和非十進制算術(shù)的JavaScript庫

https://mikemcl.github.io/bignumber.js/
https://juejin.cn/post/6844903704714280968###heading-7

QRCode.js、 qrcode.vue

https://www.npmjs.com/package/qrcodejs2

https://www.npmjs.com/package/qrcode.vue

==功能==：

npm install --save qrcode.vue
npm i qrcodejs2


   getBlob(base64) {
      const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime類型
      const byteString = atob(base64.split(',')[1]); // base64 解碼
      const arrayBuffer = new ArrayBuffer(byteString.length); // 創(chuàng)建緩沖數(shù)組
      const intArray = new Uint8Array(arrayBuffer); // 創(chuàng)建視圖
      for (let i = 0; i < byteString.length; i += 1) {
        intArray[i] = byteString.charCodeAt(i);
      }
      return new Blob([intArray], {
        type: mimeString,
      });
    },
    savePicture(Url = this.qrcodeUrl) {
      const blob = new Blob([''], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = Url;
      // eslint-disable-next-line prefer-destructuring
      a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('?')[0];
      const e = document.createEvent('MouseEvents');
      e.initMouseEvent(
        'click',
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null,
      );
      a.dispatchEvent(e);
      URL.revokeObjectURL(url);
    },
    _qrcode(url) {
      const div = document.createElement('div');
      // eslint-disable-next-line new-cap
      const code = new QRCode(div, {
        text: url,
        width: 500,
        height: 500,
        colorDark: '###000000',
        colorLight: '###ffffff',
        correctLevel: QRCode.CorrectLevel.L,
      });
      // 這里如果需要在頁面上展示的話，就將div節(jié)點給添加到dom樹上去；node.appendChild(div)
      const canvas = code._el.querySelector('canvas'); // 獲取生成二維碼中的canvas，并將canvas轉(zhuǎn)換成base64
      const base64Text = canvas.toDataURL('image/png');
      const blob = this.getBlob(base64Text); // 將base64轉(zhuǎn)換成blob對象
      return window.URL.createObjectURL(blob);
    },

cssnano、js-beautify

https://www.npmjs.com/package/cssnano

https://www.npmjs.com/package/js-beautify

==功能==：css js 壓縮工具

cors node

https://www.npmjs.com/package/cors

==功能==：CORS是一個node.js軟件包，用于提供可用于通過各種選項啟用CORS的Connect / Express中間件。

npm install cors


var cors = require('cors');
app.use(
  cors({
    origin: ['http://localhost:8000'],
    methods: ['GET', 'POST'],
    alloweHeaders: ['Conten-Type', 'Authorization'],
  })
);

countup.js

https://www.npmjs.com/package/countup.js

==功能==：數(shù)字滾動插件使用方法詳解

npm i countup.js

interface CountUpOptions {
  startVal?: number; // number to start at (0)
  decimalPlaces?: number; // number of decimal places (0)
  duration?: number; // animation duration in seconds (2)
  useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',')
  decimal?: string; // decimal ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result
  prefix?: string; // text prepended to result
  suffix?: string; // text appended to result
  numerals?: string[]; // numeral glyph substitution
}

js-base64

https://www.npmjs.com/package/js-base64

==功能==：另一個Base64轉(zhuǎn)碼器。

npm install --save js-base64

require=require('esm')(module);
import {Base64} from 'js-base64';


let latin = 'dankogai';
let utf8  = '小飼弾'
let u8s   =  new Uint8Array([100,97,110,107,111,103,97,105]);
Base64.encode(latin);             // ZGFua29nYWk=
Base64.btoa(latin);               // ZGFua29nYWk=
Base64.btoa(utf8);                // raises exception
Base64.fromUint8Array(u8s);       // ZGFua29nYWk=
Base64.fromUint8Array(u8s, true); // ZGFua29nYW which is URI safe
Base64.encode(utf8);              // 5bCP6aO85by+
Base64.encode(utf8, true)         // 5bCP6aO85by-
Base64.encodeURI(utf8);           // 5bCP6aO85by-

json-bigint

https://www.npmjs.com/package/json-bigint

==功能==：Native Bigint是最近添加到JS的，因此我們添加了一個利用它的選項，而不是bignumber.js。但是，使用本機BigInt進行解析仍然是向后兼容的選項。

var JSONbig = require('json-bigint');
 
var json = '{ "value" : 9223372036854775807, "v2": 123 }';
console.log('Input:', json);
console.log('');
 
console.log('node.js built-in JSON:');
var r = JSON.parse(json);
console.log('JSON.parse(input).value : ', r.value.toString());
console.log('JSON.stringify(JSON.parse(input)):', JSON.stringify(r));
 
console.log('\n\nbig number JSON:');
var r1 = JSONbig.parse(json);
console.log('JSONbig.parse(input).value : ', r1.value.toString());
console.log('JSONbig.stringify(JSONbig.parse(input)):', JSONbig.stringify(r1));

vuejs-datetimepicker

https://www.npmjs.com/package/vuejs-datetimepicker

==功能==：

npm install vuejs-datetimepicker


<template>
    <datetime format="MM/DD/YYYY" width="300px" v-model="val"></datetime>
</template>
 
<script>
import datetime from 'vuejs-datetimepicker';
 
export default {
    components: { datetime }
};
</script> 

vue-meta-info

https://www.npmjs.com/package/vue-meta-info

==功能==：基于Vue 2.0 的單頁面 meta info 管理.

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

vue-smooth-scroll

https://www.npmjs.com/package/vue-smooth-scroll

==功能==：Scroll

npm install --save vue-smooth-scroll

import vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll)

prismjs

https://www.npmjs.com/package/prismjs

==功能==：Prism是一個輕量，健壯，優(yōu)雅的語法高亮庫。這是Dabblet的衍生項目。

vuex-persistedstate

https://www.npmjs.com/package/vuex-persistedstate

==功能==：

npm install --save vuex-persistedstate


import createPersistedState from 'vuex-persistedstate';
import * as Cookies from 'js-cookie';
import cookie from 'cookie';
 
export default ({ store, req }) => {
    createPersistedState({
        paths: [...],
        storage: {
            getItem: (key) => {
                // See https://nuxtjs.org/guide/plugins/###using-process-flags
                if (process.server) {
                    const parsedCookies = cookie.parse(req.headers.cookie);
                    return parsedCookies[key];
                } else {
                    return Cookies.get(key);
                }
            },
            // Please see https://github.com/js-cookie/js-cookie###json, on how to handle JSON.
            setItem: (key, value) =>
                Cookies.set(key, value, { expires: 365, secure: false }),
            removeItem: key => Cookies.remove(key)
        }
    })(store);
};

vue-slider-component

https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md

==功能==：一個高度定制化的滑塊組件

$ yarn add vue-slider-component
### npm install vue-slider-component --save


<template>
  <vue-slider v-model="value" />
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider
  },
  data () {
    return {
      value: 0
    }
  }
}
</script>

CodeMirror

https://www.npmjs.com/package/codemirror

==功能==：CodeMirror是使用JavaScript為瀏覽器實現(xiàn)的多功能文本編輯器。它專門用于編輯代碼，并具有100多種語言模式和各種插件，可實現(xiàn)更高級的編輯功能。每種語言都帶有功能齊全的代碼和語法高亮顯示，以幫助閱讀和編輯復(fù)雜代碼。

vue-codemirror

https://www.npmjs.com/package/vue-codemirror

==功能==：

 <codemirror
        ref="editQuerySQL"
        @ready="onCodemirrorReady"
        @input="onCodemirrorInput"
        v-model="query.sql"
        :options="cmOptions"
      ></codemirror>
      
      
import { codemirror } from 'vue-codemirror';
import { getEthdb } from '@/api';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/idea.css';
// import 'codemirror/theme/base16-dark.css';
import 'codemirror/theme/panda-syntax.css';
import 'codemirror/addon/hint/show-hint.css';

import 'codemirror/lib/codemirror';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';

        
export default {
    data(){
        retrun {
            query: {
                sql: 'SELECT * FROM ethblock LIMIT 200',
             },
              cmOptions: {
                scroll: false,
                tabSize: 4,
                lineNumbers: false,
                line: false,
                indentWithTabs: true,
                smartIndent: true,
                autofocus: false,
                mode: 'text/x-mariadb',
                theme: 'idea',
                hintOptions: {
                  completeSingle: false,
                },
              },
        }
    },
    methods:{
     onCodemirrorReady(cm) {
      cm.on('keypress', () => {
        cm.showHint();
      });
    },
     onCodemirrorInput(newQuery) {
      this.query.sql = newQuery;
    },
    }
    
    
}

  

portfinder || get-port node

https://www.npmjs.com/package/portfinder

https://www.npmjs.com/package/get-port

==功能==：端口查看器

[sudo] npm install portfinder



portfinder.getPort({
    port: 3000,    // minimum port
    stopPort: 3333 // maximum port
}, callback);

regedit node

https://www.npmjs.com/package/regedit

==功能==：使用node.js和Windows腳本宿主對Windows注冊表進行讀取，寫入，列出和處理各種時髦的事情。

lowdb

https://www.npmjs.com/package/lowdb

==功能==：適用于Node，Electron和瀏覽器的小型JSON數(shù)據(jù)庫。由Lodash驅(qū)動。??

npm install lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
 
const adapter = new FileSync('db.json')
const db = low(adapter)
 
// Set some defaults
db.defaults({ posts: [], user: {} })
  .write()
 
// Add a post
db.get('posts')
  .push({ id: 1, title: 'lowdb is awesome'})
  .write()
 
// Set a user using Lodash shorthand syntax
db.set('user.name', 'typicode')
  .write()

cheerio node

https://github.com/cheeriojs/cheerio/wiki/Chinese-README

==功能==：為服務(wù)器特別定制的，快速、靈活、實施的jQuery核心實現(xiàn). 爬蟲

npm install cheerio
const cheerio = require('cheerio');
const $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <html><head></head><body><h2 class="title welcome">Hello there!</h2></body></html>

libxmljs

https://github.com/libxmljs/libxmljs/wiki

==功能==：解析xml

node-fetch、 got node

https://github.com/node-fetch/node-fetch

https://github.com/sindresorhus/got###readme

==功能==：node-ajax

ora node

https://www.npmjs.com/package/ora

==功能==：優(yōu)雅的終端旋轉(zhuǎn)器

const ora = require('ora');
 
const spinner = ora('Loading unicorns').start();
 
setTimeout(() => {
    spinner.color = 'yellow';
    spinner.text = 'Loading rainbows';
}, 1000);

node-mkdirp 、rimraf node

https://github.com/substack/node-mkdirp

https://www.npmjs.com/package/rimraf

==功能==：Like mkdir -p UNIX 命令 rm-rf . nodejs 新建創(chuàng)建文件

var mkdirp = require('mkdirp');
    
mkdirp('/tmp/foo/bar/baz', function (err) {
    if (err) console.error(err)
    else console.log('pow!')
});

shelljs

https://www.npmjs.com/package/shelljs

==功能==：hellJS是在Node.js API之上的Unix shell命令的可移植（Windows / Linux / OS X）實現(xiàn)。您可以使用它消除shell腳本對Unix的依賴，同時仍然保留其熟悉而強大的命令。您還可以全局安裝它，以便可以從Node項目外部運行它-告別那些討厭的Bash腳本！

var shell = require('shelljs');
 
if (!shell.which('git')) {
  shell.echo('Sorry, this script requires git');
  shell.exit(1);
}
 
// Copy files to release dir
shell.rm('-rf', 'out/Release');
shell.cp('-R', 'stuff/', 'out/Release');
 
// Replace macros in each .js file
shell.cd('lib');
shell.ls('*.js').forEach(function (file) {
  shell.sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file);
});
shell.cd('..');

shx

https://www.npmjs.com/package/shx

==功能==：Shx 是一個包裝 ShellJS Unix 命令的包裝器，為 npm 包腳本中簡單的類 Unix 跨平臺命令提供了一個簡單的解決方案

• ShellJS: Good for writing long scripts, all in JS, running via NodeJS (e.g. node myScript.js).
• shx: Good for writing one-off commands in npm package scripts (e.g. "clean": "shx rm -rf out/").

npm install shx --save-dev

package.json:
{
  "scripts": {
    "clean": "shx rm -rf build dist && shx echo Done"
  }
}

node-ssh

https://github.com/steelbrain/node-ssh###readme

==功能==：Node-SSH 是 ssh2的一個非常輕量級的 Promise 包裝器。

chalk

https://github.com/chalk/chalk

==功能==：給終端嵌套您想要的樣式。

const chalk = require('chalk');
const log = console.log;

// Combine styled and normal strings
log(chalk.blue('Hello') + ' World' + chalk.red('!'));

// Compose multiple styles using the chainable API
log(chalk.blue.bgRed.bold('Hello world!'));

// Pass in multiple arguments
log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

// Nest styles
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

// Nest styles of the same type even (color, underline, background)
log(chalk.green(
    'I am a green line ' +
    chalk.blue.underline.bold('with a blue substring') +
    ' that becomes green again!'
));

Nzh

https://blog.whyoop.com/nzh/docs/###/

==功能==：適用于需要轉(zhuǎn)換阿拉伯數(shù)字與中文數(shù)字的場景。特點如下:

• 以字符串的方式轉(zhuǎn)換，沒有超大數(shù)及浮點數(shù)等問題(請自行對原數(shù)據(jù)進行四舍五入等操作)
• 支持科學(xué)記數(shù)法字符串的轉(zhuǎn)換
• 支持口語化
• 支持自定義轉(zhuǎn)換(不論是兆,京還是厘都可以用)
• 對超大數(shù)支持用爭議教少的萬萬億代替億億
• 當然,你還可以把中文數(shù)字再轉(zhuǎn)回阿拉伯數(shù)字

npm install nzh --save
var Nzh = require("nzh");
var nzhcn = require("nzh/cn"); //直接使用簡體中文
var nzhhk = require("nzh/hk"); //繁體中文
var nzhcn = Nzh.cn;                 // 使用簡體中文,  另外有 Nzh.hk -- 繁體中文

nzhcn.encodeS(100111);              // 轉(zhuǎn)中文小寫 >> 十萬零一百一十一
nzhcn.encodeB(100111);              // 轉(zhuǎn)中文大寫 >> 壹拾萬零壹佰壹拾壹
nzhcn.encodeS("1.23456789e+21");    // 科學(xué)記數(shù)法字符串 >> 十二萬三千四百五十六萬萬七千八百九十萬億
nzhcn.toMoney("100111.11");         // 轉(zhuǎn)中文金額 >> 人民幣壹拾萬零壹佰壹拾壹元壹角壹分

decko

https://github.com/developit/decko

節(jié)流 防抖https://blog.csdn.net/qq_2955...==功能==：三個最有用的裝飾器的簡潔實現(xiàn)：

• @bind：this在方法內(nèi)使常量的值
• @debounce：限制對方法的調(diào)用
• @memoize：根據(jù)參數(shù)緩存返回值

npm i -S decko

p-queue

https://github.com/sindresorhus/p-queue###readme

==功能==：對限制速率的異步（或同步）操作很有用。例如，在與REST API交互時或在執(zhí)行CPU /內(nèi)存密集型任務(wù)時。

const {default: PQueue} = require('p-queue');
const got = require('got');

const queue = new PQueue({concurrency: 1});

(async () => {
    await queue.add(() => got('https://sindresorhus.com'));
    console.log('Done: sindresorhus.com');
})();

(async () => {
    await queue.add(() => got('https://avajs.dev'));
    console.log('Done: avajs.dev');
})();

(async () => {
    const task = await getUnicornTask();
    await queue.add(task);
    console.log('Done: Unicorn task');
})();

sleep

https://www.npmjs.com/package/sleep

==功能==：sleep

npm i sleep

var sleep = require('sleep');
function msleep(n) {
  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, n);
}
function sleep(n) {
  msleep(n*1000);
}

delay

https://github.com/sindresorhus/delay###readme

==功能==：將承諾推遲一定的時間

npm install delay
const delay = require('delay');

(async () => {
    bar();

    await delay(100);

    // Executed 100 milliseconds later
    baz();
})();

better-scroll

https://github.com/ustbhuangyi/better-scroll

==功能==：BetterScroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。它的核心是借鑒的 iscroll 的實現(xiàn)，它的 API 設(shè)計基本兼容 iscroll，在 iscroll 的基礎(chǔ)上又擴展了一些 feature 以及做了一些性能優(yōu)化。

https://better-scroll.github.io/docs/zh-CN/guide/###betterscroll-%E6%98%AF%E4%BB%80%E4%B9%88

create-keyframe-animation

https://github.com/HenrikJoreteg/create-keyframe-animation

==功能==：使用JavaScrip在瀏覽器中動態(tài)生成CSS關(guān)鍵幀動畫（不維護了）

vconsole

https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md

==功能==：一個輕量、可拓展、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板。

<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>