Cocoscreator编辑器内部使用的node packages学习借鉴 (1/3)
acorn
一个用 JavaScript 编写的小巧而快速的 JavaScript 解析器。
https://www.npmjs.com/package/acorn
示例
let acorn = require("acorn");
console.log(acorn.parse("1 + 1", {ecmaVersion: 2020}));
ansi-regex
用于匹配 ANSI 转义码的正则表达式
https://www.npmjs.com/package/ansi-regex
示例
const ansiRegex = require('ansi-regex');
ansiRegex().test('\u001B[4mcake\u001B[0m');
//=> true
ansiRegex().test('cake');
//=> false
'\u001B[4mcake\u001B[0m'.match(ansiRegex());
//=> ['\u001B[4m', '\u001B[0m']
'\u001B[4mcake\u001B[0m'.match(ansiRegex({onlyFirst: true}));
//=> ['\u001B[4m']
'\u001B]8;;https://github.com\u0007click\u001B]8;;\u0007'.match(ansiRegex());
//=> ['\u001B]8;;https://github.com\u0007', '\u001B]8;;\u0007']
ansi-styles
用于终端中的样式字符串的 ANSI 转义代码
https://www.npmjs.com/package/ansi-styles
示例
const style = require('ansi-styles');
console.log(`${style.green.open}Hello world!${style.green.close}`);
// Color conversion between 256/truecolor
// NOTE: When converting from truecolor to 256 colors, the original color
// may be degraded to fit the new color palette. This means terminals
// that do not support 16 million colors will best-match the
// original color.
console.log(`${style.color.ansi256(style.rgbToAnsi256(199, 20, 250))}Hello World${style.color.close}`)
console.log(`${style.color.ansi16m(...style.hexToRgb('#abcdef'))}Hello World${style.color.close}`)
array-union
按顺序从输入数组创建一个唯一值数组。
https://www.npmjs.com/package/array-union
示例
import arrayUnion from 'array-union';
arrayUnion([1, 1, 2, 3], [2, 3]);
//=> [1, 2, 3]
arrayUnion(['foo', 'foo', 'bar']);
//=> ['foo', 'bar']
arrayUnion(['🐱', '🦄', '🐻'], ['🦄', '🌈']);
//=> ['🐱', '🦄', '🐻', '🌈']
arrayUnion(['🐱', '🦄'], ['🐻', '🦄'], ['🐶', '🌈', '🌈']);
//=> ['🐱', '🦄', '🐻', '🐶', '🌈']
array-uniq
创建一个没有重复的数组。
https://www.npmjs.com/package/array-uniq
示例
const arrayUniq = require('array-uniq');
arrayUniq([1, 1, 2, 3, 3]);
//=> [1, 2, 3]
arrayUniq(['foo', 'foo', 'bar', 'foo']);
//=> ['foo', 'bar']
async
Async 是一个实用程序模块，它提供了直接的、强大的函数来处理异步 JavaScript。虽然最初设计用于 Node.js，可以通过 npmi async 安装，但它也可以直接在浏览器中使用。ESM/MJS 版本包含在主要的异步包中，应该自动与兼容的捆绑器(如 Webpack 和 Rollup)一起使用。
https://www.npmjs.com/package/async
示例
var async = require("async");
var obj = {dev: "/dev.json", test: "/test.json", prod: "/prod.json"};
var configs = {};
async.forEachOf(obj, (value, key, callback) => {
fs.readFile(__dirname + value, "utf8", (err, data) => {
if (err) return callback(err);
try {
configs[key] = JSON.parse(data);
} catch (e) {
return callback(e);
}
callback();
});
}, err => {
if (err) console.error(err.message);
// configs is now a map of JSON data
doSomethingWith(configs);
});
var async = require("async");
// ...or ES2017 async functions
async.mapLimit(urls, 5, async function(url) {
const response = await fetch(url)
return response.body
}, (err, results) => {
if (err) throw err
// results is now an array of the response bodies
console.log(results)
})
autolinker
好的自动链接实现。
https://www.npmjs.com/package/autolinker
示例
var linkedText = Autolinker.link( "Check out google.com" );
// Produces: "Check out <a href="http://google.com" target="_blank" rel="noopener noreferrer">google.com</a>"
var linkedText = Autolinker.link( "Check out google.com", {
newWindow: false
} );
// Produces: "Check out <a href="http://google.com">google.com</a>"
babel-code-frame
生成包含指向源位置的代码框架的错误。
https://www.npmjs.com/package/babel-code-frame
示例
import codeFrame from 'babel-code-frame';
const rawLines = `class Foo {
constructor()
}`;
const lineNumber = 2;
const colNumber = 16;
const result = codeFrame(rawLines, lineNumber, colNumber, { /* options */ });
console.log(result);
1 | class Foo {
> 2 | constructor()
| ^
3 | }
babel-core
转换传入的代码。返回具有生成的代码、源地图和 AST 的对象。
https://www.npmjs.com/package/babel-core
示例
babel.transform(code, options) // => { code, map, ast }
babel-generator
将 AST 转换为代码。
https://www.npmjs.com/package/babel-generator
示例
import {parse} from 'babylon';
import generate from 'babel-generator';
const code = 'class Example {}';
const ast = parse(code);
const output = generate(ast, { /* options */ }, code);
babel-helpers
babel转换使用的辅助函数集合。
https://www.npmjs.com/package/babel-helpers
示例
import * as helpers from 'babel-helpers';
import * as t from 'babel-types';
const typeofHelper = helpers.get('typeof');
t.isExpressionStatement(typeofHelper);
// true
babel-messages
babel使用的调试消息集合。
https://www.npmjs.com/package/babel-messages
示例
import * as messages from 'babel-messages';
messages.get('tailCallReassignmentDeopt');
// > "Function reference has been..."
babel-runtime
是一个包含 Babel 模块化运行时助手和 regenerator-runtime 版本的库。
https://www.npmjs.com/package/babel-runtime
示例
class Circle {}
示例
function _classCallCheck(instance, Constructor) {
//...
}
var Circle = function Circle() {
_classCallCheck(this, Circle);
};
示例
var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");
var Circle = function Circle() {
_classCallCheck(this, Circle);
};
babel-template
从字符串模板生成 AST。
https://www.npmjs.com/package/babel-template
示例
import template from "babel-template";
import generate from "babel-generator";
import * as t from "babel-types";
const buildRequire = template(`
var IMPORT_NAME = require(SOURCE);
`);
const ast = buildRequire({
IMPORT_NAME: t.identifier("myModule"),
SOURCE: t.stringLiteral("my-module")
});
console.log(generate(ast).code);
babel-traverse
Babel-traverse 维护整个树状态，并负责替换、删除和添加节点。
https://www.npmjs.com/package/babel-traverse
示例
import * as babylon from "babylon";
import traverse from "babel-traverse";
const code = `function square(n) {
return n * n;
}`;
const ast = babylon.parse(code);
traverse(ast, {
enter(path) {
if (path.isIdentifier({ name: "n" })) {
path.node.name = "x";
}
}
});
babel-types
此模块包含手动构建 AST 和检查 AST 节点类型的方法。
https://www.npmjs.com/package/babel-types
示例
t.anyTypeAnnotation()
babylon
Babylon 是 Babel 中使用的 JavaScript 解析器。
https://www.npmjs.com/package/babylon
示例
require("babylon").parse("code", {
// parse in strict mode and allow module declarations
sourceType: "module",
plugins: [
// enable jsx and flow syntax
"jsx",
"flow"
]
});
balanced-match
匹配平衡的字符串对，比如{和}或者 < b > 和 。也支持正则表达式！
https://www.npmjs.com/package/balanced-match
示例
var balanced = require('balanced-match');
console.log(balanced('{', '}', 'pre{in{nested}}post'));
console.log(balanced('{', '}', 'pre{first}between{second}post'));
console.log(balanced(/\s+\{\s+/, /\s+\}\s+/, 'pre { in{nest} } post'));
$ node example.js
{ start: 3, end: 14, pre: 'pre', body: 'in{nested}', post: 'post' }
{ start: 3,
end: 9,
pre: 'pre',
body: 'first',
post: 'between{second}post' }
{ start: 3, end: 17, pre: 'pre', body: 'in{nest}', post: 'post' }
brace-expansion
在 JavaScript 中使用括号扩展，如在 sh/bash 中所知。
https://www.npmjs.com/package/brace-expansion
示例
var expand = require('brace-expansion');
expand('file-{a,b,c}.jpg')
// => ['file-a.jpg', 'file-b.jpg', 'file-c.jpg']
expand('-v{,,}')
// => ['-v', '-v', '-v']
expand('file{0..2}.jpg')
// => ['file0.jpg', 'file1.jpg', 'file2.jpg']
expand('file-{a..c}.jpg')
// => ['file-a.jpg', 'file-b.jpg', 'file-c.jpg']
expand('file{2..0}.jpg')
// => ['file2.jpg', 'file1.jpg', 'file0.jpg']
expand('file{0..4..2}.jpg')
// => ['file0.jpg', 'file2.jpg', 'file4.jpg']
expand('file-{a..e..2}.jpg')
// => ['file-a.jpg', 'file-c.jpg', 'file-e.jpg']
expand('file{00..10..5}.jpg')
// => ['file00.jpg', 'file05.jpg', 'file10.jpg']
expand('{{A..C},{a..c}}')
// => ['A', 'B', 'C', 'a', 'b', 'c']
expand('ppp{,config,oe{,conf}}')
// => ['ppp', 'pppconfig', 'pppoe', 'pppoeconf']
chroma-js
一个微小的、零依赖的 JavaScript 库(13.5 kB) ，用于各种颜色转换和颜色尺度。
https://www.npmjs.com/package/chroma-js
示例
chroma('#D4F880').darken().hex(); // #9BC04B
scale = chroma.scale(['white', 'red']);
scale(0.5).hex(); // #FF7F7F
chroma.scale(['white', 'red']).mode('lab');
chroma.scale('RdYlBu').domain(myValues, 7, 'quantiles');
concat-map
示例
var concatMap = require('concat-map');
var xs = [ 1, 2, 3, 4, 5, 6 ];
var ys = concatMap(xs, function (x) {
return x % 2 ? [ x - 0.1, x, x + 0.1 ] : [];
});
console.dir(ys);
<!--[ 0.9, 1, 1.1, 2.9, 3, 3.1, 4.9, 5, 5.1 ]-->
convert-source-map
将source-map从/转换为不同的格式，并允许添加/更改属性。
https://www.npmjs.com/package/convert-source-map
示例
var convert = require('convert-source-map');
var json = convert
.fromComment('//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVpbGQvZm9vLm1pbi5qcyIsInNvdXJjZXMiOlsic3JjL2Zvby5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIvIn0=')
.toJSON();
var modified = convert
.fromComment('//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVpbGQvZm9vLm1pbi5qcyIsInNvdXJjZXMiOlsic3JjL2Zvby5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIvIn0=')
.setProperty('sources', [ 'SRC/FOO.JS' ])
.toJSON();
console.log(json);
console.log(modified);
<!--{"version":3,"file":"build/foo.min.js","sources":["src/foo.js"],"names":[],"mappings":"AAAA","sourceRoot":"/"}-->
<!--{"version":3,"file":"build/foo.min.js","sources":["SRC/FOO.JS"],"names":[],"mappings":"AAAA","sourceRoot":"/"}-->
core-js
用于 JavaScript 的模块化标准库。包括截止到2021年的 ECMAScript 的多边形: 许诺、符号、集合、迭代器、类型化数组、许多其他特性、 ECMAScript 提案、一些跨平台 WHATWG/W3C 特性以及 URL 等提案。您只能加载必需的特性，或者使用它而不会污染全局名称空间。
https://www.npmjs.com/package/core-js
示例
import from from 'core-js-pure/features/array/from';
import flat from 'core-js-pure/features/array/flat';
import Set from 'core-js-pure/features/set';
import Promise from 'core-js-pure/features/promise';
from(new Set([1, 2, 3, 2, 1])); // => [1, 2, 3]
flat([1, [2, 3], [4, [5]]], 2); // => [1, 2, 3, 4, 5]
Promise.resolve(32).then(x => console.log(x)); // => 32
debug
一个模仿 Node.js 核心调试技术的小型 JavaScript 调试工具，适用于 Node.js 和 web 浏览器。
https://www.npmjs.com/package/debug
示例
var debug = require('debug')('http')
, http = require('http')
, name = 'My App';
// fake app
debug('booting %o', name);
http.createServer(function(req, res){
debug(req.method + ' ' + req.url);
res.end('hello\n');
}).listen(3000, function(){
debug('listening');
});
// fake worker of some kind
require('./worker');
var a = require('debug')('worker:a')
, b = require('debug')('worker:b');
function work() {
a('doing lots of uninteresting work');
setTimeout(work, Math.random() * 1000);
}
work();
function workb() {
b('doing some work');
setTimeout(workb, Math.random() * 2000);
}
workb();
define-properties
同时定义多个非可枚举属性。可用时使用 Object.defineProperty; 在旧引擎中回到标准赋值。现有属性不会被重写。接受属性名称到谓词的映射，如果为真，则强制重写。
https://www.npmjs.com/package/define-properties
示例
var define = require('define-properties');
var assert = require('assert');
var obj = define({ a: 1, b: 2 }, {
a: 10,
b: 20,
c: 30
});
assert(obj.a === 1);
assert(obj.b === 2);
assert(obj.c === 30);
if (define.supportsDescriptors) {
assert.deepEqual(Object.keys(obj), ['a', 'b']);
assert.deepEqual(Object.getOwnPropertyDescriptor(obj, 'c'), {
configurable: true,
enumerable: false,
value: 30,
writable: false
});
}
var define = require('define-properties');
var assert = require('assert');
var obj = define({ a: 1, b: 2, c: 3 }, {
a: 10,
b: 20,
c: 30
}, {
a: function () { return false; },
b: function () { return true; }
});
assert(obj.a === 1);
assert(obj.b === 20);
assert(obj.c === 3);
if (define.supportsDescriptors) {
assert.deepEqual(Object.keys(obj), ['a', 'c']);
assert.deepEqual(Object.getOwnPropertyDescriptor(obj, 'b'), {
configurable: true,
enumerable: false,
value: 20,
writable: false
});
}
defined
返回第一个不是undefined的参数。
https://www.npmjs.com/package/acorn
示例
var defined = require('defined');
var opts = { y : false, w : 4 };
var x = defined(opts.x, opts.y, opts.w, 100);
console.log(x);
<!--false-->
detect-indent
示例
const fs = require('fs');
const detectIndent = require('detect-indent');
/*
{
"ilove": "pizza"
}
*/
const file = fs.readFileSync('foo.json', 'utf8');
// Tries to detect the indentation and falls back to a default if it can't
const indent = detectIndent(file).indent || ' ';
const json = JSON.parse(file);
json.ilove = 'unicorns';
fs.writeFileSync('foo.json', JSON.stringify(json, null, indent));
/*
{
"ilove": "unicorns"
}
*/
detective
通过遍历 AST 查找所有require()的调用。
https://www.npmjs.com/package/detective
示例
var a = require('a');
var b = require('b');
var c = require('c');
<!--strings_src.js-->
var detective = require('detective');
var fs = require('fs');
var src = fs.readFileSync(__dirname + '/strings_src.js');
var requires = detective(src);
console.dir(requires);
<!--[ 'a', 'b', 'c' ]-->
duplexer
获取可写流和可读流，并将它们显示为可读的可写流。
https://www.npmjs.com/package/duplexer
示例
var cp = require('child_process')
, duplex = require('duplexer')
, grep = cp.exec('grep Stream')
duplex(grep.stdin, grep.stdout)
electron-ipc-plus
允许发送 ipc 请求并在回调函数中等待回复。
https://www.npmjs.com/package/electron-ipc-plus
示例1
const ipcPlusM = require('electron-ipc-plus');
ipcPlusM.sendToWin(browserWin, 'app:say-hello', 'hello renderer process!', (err, message) => {
console.log(`renderer replied: ${message}`);
});
const ipcPlusR = require('electron-ipc-plus');
ipcPlusR.on('app:say-hello', (event, message) => {
console.log(`main process said: ${message}`);
setTimeout(() => {
event.reply && event.reply(null, 'hi main process!');
}, 500);
});
示例2
const ipcPlusR = require('electron-ipc-plus');
ipcPlusR.sendToMain('app:say-hello', 'hello main process!', (err, message) => {
console.log(`main replied: ${message}`);
});
const ipcPlusM = require('electron-ipc-plus');
ipcPlusM.on('app:say-hello', (event, message) => {
console.log(`renderer process said: ${message}`);
setTimeout(() => {
event.reply && event.reply(null, 'hi renderer process!');
}, 500);
});
electron-platform
electron 和 Web 浏览器的平台检测。
https://www.npmjs.com/package/electron-platform
示例
const platform = require('electron-platform');
if ( platform.isRendererProcess ) {
// do something
}
electron-profile
为你的 Electron 应用程序存储和操作你的个人资料。
https://www.npmjs.com/package/electron-profile
示例
const profile = require('electron-profile');
let settings = profile.load('profile://local/settings.json');
settings.set('user.name', 'Johnny Wu');
console.log(settings.get('user.name')); // Johnny Wu
settings.save();
escape-string-regexp
可以使用它转义插入到正则表达式中间的字符串。
https://www.npmjs.com/package/escape-string-regexp
示例
const escapeStringRegexp = require('escape-string-regexp');
const escapedString = escapeStringRegexp('How much $ for a 🦄?');
//=> 'How much \\$ for a 🦄\\?'
new RegExp(escapedString);
esutils
ECMAScript 语言工具的实用工具框。
https://www.npmjs.com/package/esutils
示例
ast.isExpression(node)
event-stream
可以配合fs.createReadStream做一些中间处理。
https://www.npmjs.com/package/event-stream
示例
fs.createReadStream(file, {flags: 'r'})
.pipe(es.split(/(\r?\n)/))
.pipe(es.map(function (line, cb) {
//do something with the line
cb(null, line)
}))
eventemitter3
升级了 EventEmitter.on，EventEmitter.once 和 EventEmitter.removeListener 的 API，以接受一个额外的参数，这个参数就是应该为发出的事件设置的上下文或这个值。这意味着您不再需要为了获得自定义此值而需要 fn.bind 的事件的开销。
https://www.npmjs.com/package/eventemitter3
示例
var EE = new EventEmitter()
, context = { foo: 'bar' };
function emitted() {
console.log(this === context); // true
}
EE.once('event-name', emitted, context);
EE.on('another-event', emitted, context);
EE.removeListener('another-event', emitted, context);
glob
使用 shell 使用的模式匹配文件，比如星星之类的。
https://www.npmjs.com/package/glob
示例
var glob = require("glob")
// options is optional
glob("**/*.js", options, function (er, files) {
// files is an array of filenames.
// If the `nonull` option is set, and nothing
// was found, then files is ["**/*.js"]
// er is an error object or null.
})
globby
基于 fast-glob，但是增加了一些有用的特性。
https://www.npmjs.com/package/globby
示例
├── unicorn
├── cake
└── rainbow
const globby = require('globby');
(async () => {
const paths = await globby(['*', '!cake']);
console.log(paths);
//=> ['unicorn', 'rainbow']
})();
has-ansi
检查字符串是否有 ANSI 转义码。
https://www.npmjs.com/package/has-ansi
示例
const hasAnsi = require('has-ansi');
hasAnsi('\u001B[4mUnicorn\u001B[0m');
//=> true
hasAnsi('cake');
//=> false