50 个让你高效编程的前端轮子

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-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); // 创建缓冲数组

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)

decima