package.json

omit.js

Utility function to create a shallow copy of an object which had dropped some fields. 和_.omit一样

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

Path-to-RegExp

Turn a path string such as /user/:name into a regular expression. 将react, vue中的路由路径配置转换成正则

const keys = [];
const regexp = pathToRegexp("/foo/:bar", keys);
// regexp = /^\/foo\/([^\/]+?)\/?$/i
// keys = [{ name: 'bar', prefix: '/', suffix: '', pattern: '[^\\/#\\?]+?', modifier: '' }]
regexp.exec("/test/route");
//=> [ '/test/route', 'test', 'route', index: 0, input: '/test/route', groups: undefined ]

qs

A querystring parsing and stringifying library with some added security. 将查询字符串转换成对象

qs.parse('foo[bar][baz]=foobarbaz')
==>
{
    foo: {
        bar: {
            baz: 'foobarbaz'
        }
    }
}

var prefixed = qs.parse('?a=b&c=d', { ignoreQueryPrefix: true });
assert.deepEqual(prefixed, { a: 'b', c: 'd' });

umi

🍙 Extensible enterprise-level front-end application framework.

umijs.org/zh-CN/docs/…

Features

🎉 Extensible, Umi implements the complete lifecycle and makes it extensible, and Umi's internal functions are all plugins. Umi also support plugins and presets.
📦 Out of the Box, Umi has built-in routing, building, deployment, testing, and so on. It only requires one dependency to get started. Umi also provides an integrated preset for React with rich functionaries.
🐠 Enterprise, It has been verified by 3000+ projects in Ant Financial and projects of Alibaba, Youku, Netease, 飞猪, KouBei and other companies.
🚀 Self Development, Including micro frontend library, component packaging, documentation tools, request library, hooks library, data flow, etc.
🌴 Perfect Routing, Supports both configuration routing and convention routing, while with functional completeness, such as dynamic routing, nested routing, permission routing, and so on.
🚄 Future Ready, Umi's community is also exploring new technologies. For example, modern mode, webpack @ 5, automated external, bundler less, etc.

use-merge-value

没找到源码

carlo

Carlo provides Node applications with Google Chrome rendering capabilities, communicates with the locally-installed browser instance using the Puppeteer project, and implements a remote call infrastructure for communication between Node and the browser. mac 执行没反应, windows 报错,弹出一个奇怪的窗口

$ node test.js

(node:13628) UnhandledPromiseRejectionWarning: Error: Protocol error (Browser.grantPermissions): Unknown permission type: clipboardRead
    at F:\cfanginht\frontend_study\carlo-test\node_modules\puppeteer-core\lib\Connection.js:74:56
    at new Promise (<anonymous>)
    at Connection.send (F:\cfanginht\frontend_study\carlo-test\node_modules\puppeteer-core\lib\Connection.js:73:12)
    at BrowserContext.overridePermissions (F:\cfanginht\frontend_study\carlo-test\node_modules\puppeteer-core\lib\Browser.js:349:28)
    at BrowserContext.<anonymous> (F:\cfanginht\frontend_study\carlo-test\node_modules\puppeteer-core\lib\helper.js:109:23)
    at App.init_ (F:\cfanginht\frontend_study\carlo-test\node_modules\carlo\lib\carlo.js:62:11)
    at Object.launch (F:\cfanginht\frontend_study\carlo-test\node_modules\carlo\lib\carlo.js:627:15)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async F:\cfanginht\frontend_study\carlo-test\test.js:5:15
(node:13628) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:13628) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

@umijs/fabric

一个包含 prettier，eslint，stylelint 的配置文件合集

A collection of configuration files containing prettier, eslint, stylelint

Use in .eslintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
 
  // in antd-design-pro
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
  },
 
  rules: {
    // your rules
  },
};

in .stylelintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
  rules: {
    // your rules
  },
};

in .prettierrc.js

const fabric = require('@umijs/fabric');
 
module.exports = {
  ...fabric.prettier,
};

supervisor

A little supervisor script for nodejs. It runs your program, and watches for code changes, so you can have hot-code reloading-ish behavior, without worrying about memory leaks and making sure you clean up all the inter-module references, and without a whole new require system. 修改代码后不用重新启动服务器, 自动启动

www.jianshu.com/p/6d84e5efe… 需要注意的是，这种方式启动的服务，是默认监控所有文件、文件夹的变化的；一旦有变化，服务就会重启. SOLUTION: 使用-i 参数来忽略某些目录

mockjs

supervisor -w mock ./app/mocks/http.js

-w|--watch A comma-delimited list of folders or js files to watch for changes. When a change to a js file occurs, reload the program Default is '.'

mock : 目录或文件
./app/mocks/http.js

[todo] 总结mockjs 在项目中的用法

react

redux-thunk

让redux可以异步执行

react-router-redux

react-router-redux 将react-router 和 redux 集成到一起，用redux的方式去操作react-router。例如，react-router 中跳转需要调用 router.push(path)，集成了react-router-redux 就可以通过dispatch的方式使用router，例如跳转可以这样做 store.dispatch(push(url))。本质上，是把react-router自己维护的状态，例如location、history、path等等，也交给redux管理。一般情况下，是没有必要使用这个库的

store.dispatch(push('/foo'))

terse

github.com/terser/ters…

老牌工具uglify不支持es6，且uglify-es不再更新，所以要使用terser作为js代码压缩工具。

..... from UglifyJs 
Unexpected token: keyword (const).....

terser-webpack-plugin: terser的webpack插件

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  configureWebpack: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            pure_funcs: ["console.log"] //pure_funcs表示删除代码中的console.log方法
          }
        }
      })
    ]
  }
}

ra-data-simple-rest

Simple REST Data Provider for react-admin

import simpleRestProvider from 'ra-data-simple-rest'

import Debounce from 'lodash-decorators/debounce';

 @Debounce(600)
  triggerResizeEvent() {
  }

memoize-one

当用相同的参数调用同一个函数时,我们希望结果能缓存,从而减少计算

import memoizeOne from 'memoize-one';
import isDeepEqual from 'lodash.isequal';
 
//我们希望 identity 的运算结果可以被缓存
const identity = x => x;
 
const shallowMemoized = memoizeOne(identity);
//通过 isDeepEqual 函数来比较前后两次参数
const deepMemoized = memoizeOne(identity, isDeepEqual);
 
const result1 = shallowMemoized({ foo: 'bar' });
const result2 = shallowMemoized({ foo: 'bar' });
 
result1 === result2; // false - difference reference
 
const result3 = deepMemoized({ foo: 'bar' });
const result4 = deepMemoized({ foo: 'bar' });
 
result3 === result4; // true - arguments are deep equal

Dependencies