50 個讓你高效編程的前端輪子，真香
作者：ZHUIMEN
https://segmentfault.com/a/1190000038589634
總結下今年用到的一些有意思的《js 輪子》（只是大概列出些比較有意思的庫，每個標題下都是超鏈接，可點擊自行查閱） 希望能對您有用！如有意思的 輪子 可以在評論列出一起討論下
color
https://www.npmjs.com/package/color
== 功能 ==：JavaScript 庫，用於不可變的顏色轉換和對 CSS 顏色字符串的支持。
npm install colorvar 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 複製粘貼
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/
== 功能 ==：一個用於格式化和處理數字的 javascript 庫。
var value = myNumeral.value();
// 1000
var myNumeral2 = numeral('1,000');
var value2 = myNumeral2.value();
// 1000omit.js
https://www.npmjs.com/package/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: 18Moment.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 設計保持完全一樣. 如果您曾經用過 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
https://github.com/HenrikJoreteg/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); // 63115200000filesize
https://www.npmjs.com/package/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
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 後續比他大的一律爲同級
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' class>
<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
class
source={currentArticle.content}
escapeHtml={false}
renderers={{
heading: HeadBlock
}}
/>
</div>
</Col>
<Col flex='200px' class>
<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 是功能齊全的圖論庫。您是否需要對關係數據進行建模和 / 或可視化，例如生物數據或社交網絡？如果是這樣，Cytoscape.js 就是您所需要的。Cytoscape.js 包含一個圖形理論模型和一個用於顯示交互式圖形的可選渲染器。該庫旨在使程序員和科學家儘可能輕鬆地在其應用程序中使用圖論，無論是用於 Node.js 應用程序中的服務器端分析還是用於豐富的用戶界面。
Lodash
https://www.npmjs.com/package/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
https://www.npmjs.com/package/patch-package
== 功能 ==：npm yran 補丁, 用於改 node_modules
cross-env node
https://www.npmjs.com/package/cross-env
== 功能 ==：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
https://www.npmjs.com/package/bignumber.js
== 功能 ==：一個用於任意精度十進制和非十進制算術的 JavaScript 庫
https://mikemcl.github.io/bignumber.js/
https://juejin.cn/post/6844903704714280968###heading-7QRCode.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); // 創建緩衝數組
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
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
== 功能 ==：數字滾動插件使用方法詳解
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 轉碼器。
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 是一個輕量，健壯，優雅的語法高亮庫。這是 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 爲瀏覽器實現的多功能文本編輯器。它專門用於編輯代碼，並具有 100 多種語言模式和各種插件，可實現更高級的編輯功能。每種語言都帶有功能齊全的代碼和語法高亮顯示，以幫助閱讀和編輯複雜代碼。
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 數據庫。由 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
https://github.com/cheeriojs/cheerio/wiki/Chinese-README
== 功能 ==：爲服務器特別定製的，快速、靈活、實施的 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
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
== 功能 ==：優雅的終端旋轉器
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 新建創建文件
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）實現。您可以使用它消除 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/###/
== 功能 ==：適用於需要轉換阿拉伯數字與中文數字的場景。特點如下:
-
以字符串的方式轉換，沒有超大數及浮點數等問題 (請自行對原數據進行四捨五入等操作)
-
支持科學記數法字符串的轉換
-
支持口語化
-
支持自定義轉換 (不論是兆, 京還是釐都可以用)
-
對超大數支持用爭議教少的萬萬億代替億億
-
當然, 你還可以把中文數字再轉回阿拉伯數字
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://github.com/developit/decko
節流 防抖 https://blog.csdn.net/qq_2955...== 功能 ==：三個最有用的裝飾器的簡潔實現：
-
@bind：this 在方法內使常量的值
-
@debounce：限制對方法的調用
-
@memoize：根據參數緩存返回值
npm i -S deckop-queue
https://github.com/sindresorhus/p-queue###readme
== 功能 ==：對限制速率的異步（或同步）操作很有用。例如，在與 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
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 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。
https://better-scroll.github.io/docs/zh-CN/guide/###betterscroll-%E6%98%AF%E4%BB%80%E4%B9%88create-keyframe-animation
https://github.com/HenrikJoreteg/create-keyframe-animation
== 功能 ==：使用 JavaScrip 在瀏覽器中動態生成 CSS 關鍵幀動畫（不維護了）
vconsole
https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md
== 功能 ==：一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/FpcAOTYULnP34XpBzJCEfw