几个常用js库，别再重复造轮子了

女爷i 2022-12-29 14:02 521阅读 0赞

年底了，总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题都是超链接，可点击自行查阅）  
希望能对您有用！

如有意思的 轮子 可以在评论列出一起讨论下

--------------------

## [color][] ##

功能：JavaScript库，用于不可变的颜色转换和对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][] ##

功能：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][] ##

功能： 文件上传下载拖拽文件 及文件夹等

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

## [react-copy-to-clipboard][] 、clipboard ##

功能：react 复制粘贴

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][] ##

功能：一个用于格式化和处理数字的javascript库。

var value = myNumeral.value();
    // 1000
    
    var myNumeral2 = numeral('1,000');
    
    var value2 = myNumeral2.value();
    // 1000

--------------------

## [omit.js][] ##

功能：返回 在目标对象中 omit\[删除; 忽略\] 指定属性的对象; 实用程序功能，用于创建删除了某些字段的对象的浅表副本。

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][] ##

功能：一个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][] ##

功能：Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 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][] ##

==~~~~功能==：用于将时间转换为毫秒。

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][] ##

功能：filesize.js提供了一种简单的方法来从数字（浮点数或整数）或字符串中获取人类可读的文件大小字符串。

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][] ##

功能：使用备注的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 后续比他大的一律为同级
      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[]>([])
    
      // 初始为开发文档
      useEffect(() => {
        // console.log(1);
    
        changeCurrentArticle(articles['1'])
      }, [])
    
      // 这里是根据文档修改进行获取目录
      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 })
      }
    
      // 书籍导航点击
      const menuOnClick = (e: any) => {
        const url = articles[e.key]
        changeCurrentArticle(url)
      }
    
      // 转换为文章右侧目录
      const transArticleNavs = (navs: any) => {
    
        // 转换为二级导航
        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">开发文档</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 ##

功能：Cytoscape.js是功能齐全的图论库。您是否需要对关系数据进行建模和/或可视化，例如生物数据或社交网络？如果是这样，Cytoscape.js就是您所需要的。Cytoscape.js包含一个图形理论模型和一个用于显示交互式图形的可选渲染器。该库旨在使程序员和科学家尽可能轻松地在其应用程序中使用图论，无论是用于Node.js应用程序中的服务器端分析还是用于丰富的用户界面。

## [Lodash][] ##

功能：函数工具类库

// 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 ##

功能：npm yran 补丁,用于改node\_modules

## [cross-env][] node ##

功能：  
cross-env这是一款运行跨平台设置和使用环境变量的脚本。

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

## [bignumber.js][] ##

功能：一个用于任意精度十进制和非十进制算术的JavaScript库

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

## [QRCode.js][]、 [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); // 创建缓冲数组
          const intArray = new Uint8Array(arrayBuffer); // 创建视图
          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节点给添加到dom树上去；node.appendChild(div)
          const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的canvas，并将canvas转换成base64
          const base64Text = canvas.toDataURL('image/png');
          const blob = this.getBlob(base64Text); // 将base64转换成blob对象
          return window.URL.createObjectURL(blob);
        },

## [cssnano][]、[js-beautify][] ##

功能： css js 压缩工具

## [cors][] node ##

功能：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][] ##

功能：数字滚动插件使用方法详解

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][] ##

功能：另一个Base64转码器。

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][] ##

功能： 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][] ##

功能：

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][] ##

功能：基于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][] ##

功能：Scroll

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

## [prismjs][] ##

功能：Prism是一个轻量，健壮，优雅的语法高亮库。这是Dabblet的衍生项目。

## [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][] ##

功能：一个高度定制化的滑块组件

$ 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][] ##

功能：CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有100多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示，以帮助阅读和编辑复杂代码。

## [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 ##

功能：端口查看器

[sudo] npm install portfinder
    
    portfinder.getPort({
        port: 3000,    // minimum port
        stopPort: 3333 // maximum port
    }, callback);

## [regedit][] node ##

功能：使用node.js和Windows脚本宿主对Windows注册表进行读取，写入，列出和处理各种时髦的事情。

## [lowdb][] ##

功能：适用于Node，Electron和浏览器的小型JSON数据库。由Lodash驱动。 ⚡️

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 ##

功能：为服务器特别定制的，快速、灵活、实施的jQuery核心实现. 爬虫

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][] ##

功能：解析xml

## [node-fetch][]、 [got][] node ##

功能：node-ajax

## [ora][] node ##

功能：优雅的终端旋转器

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

## [node-mkdirp][] 、[rimraf][] node ##

功能：Like mkdir -p UNIX 命令 rm-rf . nodejs 新建创建文件

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

## [shelljs][] ##

功能：hellJS是在Node.js API之上的Unix shell命令的可移植（Windows / Linux / OS X）实现。您可以使用它消除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][] ##

功能：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][] ##

功能：Node-SSH 是 ssh2的一个非常轻量级的 Promise 包装器。

## [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][] ##

功能：适用于需要转换阿拉伯数字与中文数字的场景。  
特点如下:

*  以字符串的方式转换，没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)
 *  支持科学记数法字符串的转换
 *  支持口语化
 *  支持自定义转换(不论是兆,京还是厘都可以用)
 *  对超大数支持用争议教少的万万亿代替亿亿
 *  当然,你还可以把中文数字再转回阿拉伯数字

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);              // 转中文小写 >> 十万零一百一十一
    nzhcn.encodeB(100111);              // 转中文大写 >> 壹拾万零壹佰壹拾壹
    nzhcn.encodeS("1.23456789e+21");    // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿
    nzhcn.toMoney("100111.11");         // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分

## [decko][] ##

节流 防抖  
[https://blog.csdn.net/qq\_2955…][https_blog.csdn.net_qq_2955]

功能：三个最有用的装饰器的简洁实现：

*  @bind：this在方法内使常量的值
 *  @debounce：限制对方法的调用
 *  @memoize：根据参数缓存返回值

npm i -S decko

## [p-queue][] ##

功能：对限制速率的异步（或同步）操作很有用。例如，在与REST API交互时或在执行CPU /内存密集型任务时。

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][] ##

功能：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][] ##

功能：将承诺推迟一定的时间

npm install delay
    const delay = require('delay');
    
    (async () => {
        bar();
    
        await delay(100);
    
        // Executed 100 milliseconds later
        baz();
    })();

## [better-scroll][] ##

功能：BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

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

## [create-keyframe-animation][] ##

功能：使用JavaScrip在浏览器中动态生成CSS关键帧动画（不维护了）

## [vconsole][] ##

功能：一个轻量、可拓展、针对手机网页的前端开发者调试面板。

## 最后 ##

**最近断断续续整理了一些阿里、腾讯、字节等等大厂的面试题，目的是想了解一下大厂招聘的技术热点，不断提升学习。**

**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，免费分享给大家，还在持续整理收集整理中，有需要的朋友[【点击我】][Link 1]免费获取。**

**篇幅有限，仅展示部分内容**

![ac0b1c2376da47d727e0dc8a77e76478.png][]

![b871b45fb2e6d5442144c863cbcff965.png][]

![f5c18f4b2878302f1f53a8c393e7eb0d.png][]

[color]: https://www.npmjs.com/package/color
[uuidjs]: https://www.npmjs.com/package/uuidjs
[rc-upload]: https://www.npmjs.com/package/rc-upload
[react-copy-to-clipboard]: https://www.npmjs.com/package/react-copy-to-clipboard
[numeral]: http://numeraljs.com/
[omit.js]: https://www.npmjs.com/package/omit.js
[Moment.js]: https://momentjs.com/
[Day.js]: https://github.com/iamkun/dayjs/blob/HEAD/docs/zh-cn/README.zh-CN.md
[milliseconds]: https://github.com/HenrikJoreteg/milliseconds
[filesize]: https://www.npmjs.com/package/filesize
[react-markdown]: https://www.npmjs.com/package/react-markdown
[cytoscape]: https://www.npmjs.com/package/cytoscape
[Lodash]: https://www.npmjs.com/package/lodash
[patch-package]: https://www.npmjs.com/package/patch-package
[cross-env]: https://www.npmjs.com/package/cross-env
[bignumber.js]: https://www.npmjs.com/package/bignumber.js
[QRCode.js]: https://www.npmjs.com/package/qrcodejs2
[qrcode.vue]: https://www.npmjs.com/package/qrcode.vue
[cssnano]: https://www.npmjs.com/package/cssnano
[js-beautify]: https://www.npmjs.com/package/js-beautify
[cors]: https://www.npmjs.com/package/cors
[countup.js]: https://www.npmjs.com/package/countup.js
[js-base64]: https://www.npmjs.com/package/js-base64
[json-bigint]: https://www.npmjs.com/package/json-bigint
[vuejs-datetimepicker]: https://www.npmjs.com/package/vuejs-datetimepicker
[vue-meta-info]: https://www.npmjs.com/package/vue-meta-info
[vue-smooth-scroll]: https://www.npmjs.com/package/vue-smooth-scroll
[prismjs]: https://www.npmjs.com/package/prismjs
[vuex-persistedstate]: https://www.npmjs.com/package/vuex-persistedstate
[vue-slider-component]: https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md
[CodeMirror]: https://www.npmjs.com/package/codemirror
[vue-codemirror]: https://www.npmjs.com/package/vue-codemirror
[portfinder]: https://www.npmjs.com/package/portfinder
[get-port]: https://www.npmjs.com/package/get-port
[regedit]: https://www.npmjs.com/package/regedit
[lowdb]: https://www.npmjs.com/package/lowdb
[cheerio]: https://github.com/cheeriojs/cheerio/wiki/Chinese-README
[libxmljs]: https://github.com/libxmljs/libxmljs/wiki
[node-fetch]: https://github.com/node-fetch/node-fetch
[got]: https://github.com/sindresorhus/got#readme
[ora]: https://www.npmjs.com/package/ora
[node-mkdirp]: https://github.com/substack/node-mkdirp
[rimraf]: https://www.npmjs.com/package/rimraf
[shelljs]: https://www.npmjs.com/package/shelljs
[shx]: https://www.npmjs.com/package/shx
[node-ssh]: https://github.com/steelbrain/node-ssh#readme
[chalk]: https://github.com/chalk/chalk
[Nzh]: https://blog.whyoop.com/nzh/docs/#/
[decko]: https://github.com/developit/decko
[https_blog.csdn.net_qq_2955]: https://blog.csdn.net/qq_29557739/article/details/96430431
[p-queue]: https://github.com/sindresorhus/p-queue#readme
[sleep]: https://www.npmjs.com/package/sleep
[delay]: https://github.com/sindresorhus/delay#readme
[better-scroll]: https://github.com/ustbhuangyi/better-scroll
[create-keyframe-animation]: https://github.com/HenrikJoreteg/create-keyframe-animation
[vconsole]: https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DZEKfV3Ax
[ac0b1c2376da47d727e0dc8a77e76478.png]: /images/20221120/aa6918805a5b4fe8acd453b5cc779905.png
[b871b45fb2e6d5442144c863cbcff965.png]: https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png
[f5c18f4b2878302f1f53a8c393e7eb0d.png]: https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png