JS第三方库¶

链接: https://cloud.seatable.cn/dtable/external-links/59b453a8639945478de2/

husky¶

在 git commit 提交前，增加一个 pre-commit 的钩子，进行格式检测和单元测试

https://www.npmjs.com/package/husky

https://typicode.github.io/husky/get-started.html

npm install --save-dev husky

npx husky init

@babel/cli7.4.4¶

babel 执行的命令行的 CLI

@babel/plugin-proposal-class-properties7.4.4¶

Below is a class with four class properties which will be transformed. This https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

@babel/plugin-transform-runtime7.4.4¶

Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals https://babeljs.io/docs/en/babel-plugin-transform-runtime

@babel/preset-env7.4.5¶

babel 预设编译后的JS代码的环境

@babel/preset-react7.0.0¶

babel 编译 react 预设的库

@svgr/webpack4.1.0¶

svg 文件loader https://www.npmjs.com/package/@svgr/webpack

@babel/core7.5.0¶

babel 核心代码（编译es6） https://babeljs.io/docs/en/babel-core

@babel/node7.5.0¶

babel-node 是一个 CLI，其工作方式与 Node.js CLI 完全相同，它的额外好处是在运行之前使用 Babel 预设和插件进行编译。 https://babeljs.io/docs/en/babel-node

@babel/plugin-transform-modules-commonjs7.5.0¶

This plugin transforms ES2015 modules to CommonJS https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs

@babel/register7.4.4¶

babel require hook https://www.npmjs.com/package/@babel/register

@babel/runtime7.8.3¶

contains Babel modular runtime helpers and a version of regenerator-runtime https://babeljs.io/docs/en/babel-runtime

webpack-node-externals¶

babel-eslint¶

babel 代码规范检查 https://www.npmjs.com/package/eslint-plugin-babel

babel-jest¶

Babel jest plugin https://www.npmjs.com/package/babel-jest

babel-loader¶

This package allows transpiling JavaScript files using Babel and webpack. https://www.npmjs.com/package/babel-loader

babel-plugin-named-asset-import¶

babel 插件

babel-preset-react-app¶

This package includes the Babel preset used by Create React App. https://www.npmjs.com/package/babel-preset-react-app

case-sensitive-paths-webpack-plugin¶

这个 Webpack 插件强制所有必需模块的整个路径与磁盘上实际路径的确切大小写匹配。使用此插件有助于缓解在 OSX 上工作的开发人员（不遵循严格的路径区分大小写）与其他开发人员或运行其他需要正确大小写路径的操作系统的构建框发生冲突的情况。 https://www.npmjs.com/package/case-sensitive-paths-webpack-plugin

css-loader¶

css 加载器

enzyme¶

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. https://www.npmjs.com/package/enzyme

enzyme-adapter-react-¶

对 react 功能组件测试，Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output. https://www.npmjs.com/package/enzyme-adapter-react-16

eslint¶

代码格式检查 https://www.npmjs.com/package/eslint

eslint-config-react-app¶

eslint 针对 react 的插件

eslint-loader¶

eslint 加载器

eslint-plugin-flowtype¶

https://www.npmjs.com/package/eslint-plugin-flowtype ESLint 的流类型 linting 规则。

eslint-plugin-import¶

该插件旨在支持 ES6+ 导入/导出语法的 linting，并防止文件路径和导入名称拼写错误的问题。 https://www.npmjs.com/package/eslint-plugin-import

eslint-plugin-jsx-ay¶

用于 JSX 元素可访问性规则的静态 AST 检查器。 https://www.npmjs.com/package/eslint-plugin-jsx-a11y

eslint-plugin-react-hooks¶

This ESLint plugin enforces the Rules of Hooks. https://www.npmjs.com/package/eslint-plugin-react-hooks

html-webpack-plugin-beta¶

简化创建 HTML 文件以服务于打包的插件 https://www.npmjs.com/package/html-webpack-plugin

identity-obj-proxy¶

使用 ES6 代理的身份对象。用于测试简单的 webpack 导入。例如，您可以告诉 Jest 将此对象模拟为导入的 CSS 模块；那么您在导入的样式对象上的所有 className 查找都将按原样返回。

https://www.npmjs.com/package/identity-obj-proxy

jest-environment-jsdom-fourteen¶

jest 插件，可以在观察模式下，选择特定的单元测试执行，已经部署到个人项目中 https://www.npmjs.com/package/jest-watch-typeahead

jest-resolve¶

说明文档和 jest 在一个界面上 https://www.npmjs.com/package/jest-resolve

jest-watch-typeahead¶

Filter your tests by file name or test name https://www.npmjs.com/package/jest-watch-typeahead

less¶

less 样式 The dynamic stylesheet language. http://lesscss.org.

less-loader¶

less 加载器

mini-css-extract-plugin¶

css 按需加载（把CSS提取到不同的JS文件中） https://www.npmjs.com/package/mini-css-extract-plugin

optimize-css-assets-webpack-plugin¶

A Webpack plugin to optimize minimize CSS assets. https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

pnp-webpack-plugin¶

Webpack 的即插即用解析器 https://www.npmjs.com/package/pnp-webpack-plugin

postcss-flexbugs-fixes¶

PostCSS plugin This project tries to fix all of flexbug's issues. https://www.npmjs.com/package/postcss-flexbugs-fixes

postcss-loader¶

postcss 加载器

postcss-normalize¶

PostCSS Normalize lets you use the parts of normalize.css or sanitize.css that you need from your browserslist. https://www.npmjs.com/package/postcss-normalize

postcss-preset-env¶

CSS 兼容不用版本早期的浏览器。PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. https://www.npmjs.com/package/postcss-preset-env

postcss-safe-parser¶

PostCSS 的容错 CSS 解析器，它将发现和修复语法错误，能够解析任何输入。 https://www.npmjs.com/package/postcss-safe-parser

sass-loader¶

sass 加载器

style-loader¶

样式加载器

terser-webpack-plugin¶

This plugin uses terser to minify your JavaScript. 压缩JS https://www.npmjs.com/package/terser-webpack-plugin

webpack¶

webpack 打包工具 https://www.npmjs.com/package/webpack

webpack-cli¶

webpack 命令行工具 https://www.npmjs.com/package/webpack-cli

webpack-dev-server¶

webpack 开发环境打包服务器 https://www.npmjs.com/package/webpack-dev-server

webpack-manifest-plugin¶

生成资源清单

https://www.npmjs.com/package/webpack-manifest-plugin

module.exports = {
  plugins: [
    new ManifestPlugin()
  ]
}

workbox-webpack-plugin¶

 https://www.npmjs.com/package/workbox-webpack-plugin  https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin

eslint-plugin-react¶

React specific linting rules for ESLint https://www.npmjs.com/package/eslint-plugin-react

file-loader¶

The file-loader resolves import/require() on a file into a url and emits the file into the output directory. https://www.npmjs.com/package/file-loader

resolve-url-loader¶

https://www.npmjs.com/package/resolve-url-loader 这个 webpack 加载器允许你拥有一个分布式的 SCSS 文件集，以及与这些 SCSS 文件共存的资源。

webpack-bundle-tracker¶

将有关 webpack 编译过程的一些统计信息，记录到文件中。（tracker 追踪者）

https://www.npmjs.com/package/webpack-bundle-tracker

和 webpack nodejs 存在兼容性问题。

This project is compatible with NodeJS versions 16 and up.

⚠️ Starting on version 17, NodeJS uses OpenSSL v3 which has compatibility issues with Webpack\@4.

This isn't an issue for Webpack\@5

however if you're using Node >= 17 and Webpack\@4, to properly use this package you must ensure to set the NODE_OPTIONS=--openssl-legacy-provider environment variable.

官方案例

var path = require('path');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: __dirname,
  entry: {
    app: ['./app'],
  },
  output: {
    path: path.resolve('./assets/bundles/'),
    filename: '[name]-[hash].js',
    publicPath: 'http://localhost:3000/assets/bundles/',
  },

  // 设置统计文件的存储路径和文件名
  plugins: [
    new BundleTracker({
      path: path.join(__dirname, 'assets'),
      filename: 'webpack-stats.json',
    }),
  ],
};

实际项目使用，根据不同环境配置了不同的统计文件

  new webpackBundleTracker({
    filename: isEnvProduction ? './webpack-stats.pro.json' : './webpack-stats.dev.json',
    publicPath: isEnvProduction ? '' : paths.publicUrlOrPath
  }),

统计文件：webpack-stats.pro.json 提供了每一个资源文件的名称和路径，每一个 chunks 引用的资源（通常是 common + others）

{
  "status": "done",
  "assets": {
    "static/css/app.58d2e6dd.css": {
      "name": "static/css/app.58d2e6dd.css",
      "path": "/build/frontend/static/css/app.58d2e6dd.css"
    },
    "static/css/commons.d6c420b4.css": {
      "name": "static/css/commons.d6c420b4.css",
      "path": "/build/frontend/static/css/commons.d6c420b4.css"
    },
    "static/css/draft.299cd106.css": {
      "name": "static/css/draft.299cd106.css",
      "path": "/build/frontend/static/css/draft.299cd106.css"
    }
  },
  "chunks": {
    "app": [
      "static/js/runtime.e32c54a5.js",
      "static/css/commons.d6c420b4.css",
      "static/js/commons.e891325f.js",
      "static/css/app.58d2e6dd.css",
      "static/js/app.011a7734.js"
    ],
    "draft": [
      "static/js/runtime.e32c54a5.js",
      "static/css/commons.d6c420b4.css",
      "static/js/commons.e891325f.js",
      "static/css/draft.299cd106.css",
      "static/js/draft.e9f03bdc.js"
    ],
    "wiki": [
      "static/js/runtime.e32c54a5.js",
      "static/css/commons.d6c420b4.css",
      "static/js/commons.e891325f.js",
      "static/css/wiki.30e6b692.css",
      "static/js/wiki.41704f71.js"
    ],
    "wiki2": [
      "static/js/runtime.e32c54a5.js",
      "static/css/commons.d6c420b4.css",
      "static/js/commons.e891325f.js",
      "static/css/wiki2.89e72cc3.css",
      "static/js/wiki2.1aa50e13.js"
    ]
  }
}

babel-register¶

The require hook will bind itself to node's require and automatically compile files on the fly. https://www.npmjs.com/package/babel-register

clean-webpack-plugin¶

A webpack plugin to remove/clean your build folder(s). https://www.npmjs.com/package/clean-webpack-plugin

webpack-merge¶

webpack-merge - Merge designed for Webpack https://www.npmjs.com/package/webpack-merge

grunt¶

https://gruntjs.com/

https://github.com/gruntjs/grunt

grunt 是 js 的任务运行器，可以自动化执行压缩，打包，测试等。实际项目使用不多，了解即可。

Why use a task runner? In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

类似 webpack，这里需要配置一个 Gruntfile.js 文件，然后运行进行编译打包

module.exports = function(grunt) {
  // 初始化配置
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

gulp¶

https://gulpjs.com/

gulp 是一个前端构建工具，支持自动化和工作流

A toolkit to automate & enhance your workflow

Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

配置文件：gulpfile.js

const { series } = require('gulp');

// The `clean` function is not exported so it can be considered a private task.
// It can still be used within the `series()` composition.
function clean(cb) {
  // body omitted
  cb();
}

// The `build` function is exported so it is public and can be run with the `gulp` command.
// It can also be used within the `series()` composition.
function build(cb) {
  // body omitted
  cb();
}

exports.build = build;
exports.default = series(clean, build);

video.js7.4.1¶

视频播放器

这个库比较大，打包压缩后也有 1mb

watermark-dom¶

https://www.npmjs.com/package/watermark-dom

watermark.js是一个给B/S网站系统加水印的插件，确保系统保密性，安全性，降低数据泄密风险。

@typescript-eslint/eslint-plugin2.2.0¶

An ESLint plugin which provides lint rules for TypeScript codebases. https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

@typescript-eslint/parser2.2.0¶

An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code. https://www.npmjs.com/package/@typescript-eslint/parser

connect-multiparty2.2.0¶

上传文件的中间件

csv¶

nodeJS 中数据类型和 csv 转换器

CSV for Node.js and the web

version¶

6.3.9

downloads¶

1,330,572

repository¶

github.com/adaltas/node-csv

homepage¶

csv.js.org

The csv project provides CSV generation, parsing, transformation and serialization for Node.js.

It has been tested and used by a large community over the years and should be considered reliable. It provides every option you would expect from an advanced CSV parser and stringifier.

This package exposes 4 packages:

csv-generate (GitHub), a flexible generator of CSV string and Javascript objects.
csv-parse (GitHub), a parser converting CSV text into arrays or objects.
csv-stringify (GitHub), a stringifier converting records into a CSV text.
stream-transform (GitHub), a transformation framework.

The full documentation for the current version is available here.

Usage¶

Installation command is npm install csv.

Each package is fully compatible with the Node.js stream 2 and 3 specifications. Also, a simple callback-based API is always provided for convenience.

Sample¶

This example uses the Stream API to create a processing pipeline.

    // Import the package
    import * as csv from '../lib/index.js';

    // Run the pipeline
    csv
    // Generate 20 records
      .generate({
        delimiter: '|',
        length: 20
      })
    // Transform CSV data into records
      .pipe(csv.parse({
        delimiter: '|'
      }))
    // Transform each value into uppercase
      .pipe(csv.transform((record) => {
        return record.map((value) => {
          return value.toUpperCase();
        });
      }))
    // Convert objects into a stream
      .pipe(csv.stringify({
        quoted: true
      }))
    // Print the CSV stream to stdout
      .pipe(process.stdout);

Development¶

This parent project doesn't have tests itself but instead delegates the tests to its child projects.

Read the documentation of the child projects for additional information.

Pavel Kolesnikov "ya-csv": http://github.com/koles/ya-csv
Chris Williams "node-csv": http://github.com/voodootikigod/node-csv
Mat Holt "PapaParse": https://github.com/mholt/PapaParse

date-format2.1.0¶

nodeJS 日期对象转换成字符串

detect-character-encoding0.8.0¶

Detect character encoding using ICU

etcd31.1.0¶

分布式集群部署 etcd3

iconv-lite¶

字符串不同格式转码

version¶

0.6.3

downloads¶

74,008,351

repository¶

github.com/ashtuchkin/iconv-lite

homepage¶

github.com/ashtuchkin/iconv-lite

iconv-lite: Pure JS character encoding conversion¶

No need for native code compilation. Quick to install, works on Windows and in sandboxed environments like Cloud9.
Used in popular projects like Express.js (body_parser), Grunt, Nodemailer, Yeoman and others.
Faster than node-iconv (see below for performance comparison).
Intuitive encode/decode API, including Streaming support.
In-browser usage via browserify or webpack (~180kb gzip compressed with Buffer shim included).
Typescript type definition file included.
React Native is supported (need to install stream module to enable Streaming API).
License: MIT.

Usage¶

Basic API¶

var iconv = require('iconv-lite');

// Convert from an encoded buffer to a js string.
str = iconv.decode(Buffer.from([0x68, 0x65, 0x6c, 0x6c, 0x6f]), 'win1251');

// Convert from a js string to an encoded buffer.
buf = iconv.encode("Sample input string", 'win1251');

// Check if encoding is supported
iconv.encodingExists("us-ascii")

Streaming API ¶

// Decode stream (from binary data stream to js strings)
http.createServer(function(req, res) {
    var converterStream = iconv.decodeStream('win1251');
    req.pipe(converterStream);

    converterStream.on('data', function(str) {
        console.log(str); // Do something with decoded strings, chunk-by-chunk.
    });
});

// Convert encoding streaming example
fs.createReadStream('file-in-win1251.txt')
    .pipe(iconv.decodeStream('win1251'))
    .pipe(iconv.encodeStream('ucs2'))
    .pipe(fs.createWriteStream('file-in-ucs2.txt'));

// Sugar: all encode/decode streams have .collect(cb) method to accumulate data.
http.createServer(function(req, res) {
    req.pipe(iconv.decodeStream('win1251')).collect(function(err, body) {
        assert(typeof body == 'string');
        console.log(body); // full request body string
    });
});

Supported encodings¶

All node.js native encodings: utf8, ucs2 / utf16-le, ascii, binary, base64, hex.
Additional unicode encodings: utf16, utf16-be, utf-7, utf-7-imap, utf32, utf32-le, and utf32-be.
All widespread singlebyte encodings: Windows 125x family, ISO-8859 family, IBM/DOS codepages, Macintosh family, KOI8 family, all others supported by iconv library. Aliases like 'latin1', 'us-ascii' also supported.
All widespread multibyte encodings: CP932, CP936, CP949, CP950, GB2312, GBK, GB18030, Big5, Shift_JIS, EUC-JP.

See all supported encodings on wiki.

Encoding/decoding speed¶

Comparison with node-iconv module (1000x256kb, on MacBook Pro, Core i5/2.6 GHz, Node v0.12.0). Note: your results may vary, so please always check on your hardware.

BOM handling¶

Decoding: BOM is stripped by default, unless overridden by passing stripBOM: false in options (f.ex. iconv.decode(buf, enc, {stripBOM: false})). A callback might also be given as a stripBOM parameter - it'll be called if BOM character was actually found.
If you want to detect UTF-8 BOM when decoding other encodings, use node-autodetect-decoder-stream module.
Encoding: No BOM added, unless overridden by addBOM: true option.

UTF-16 Encodings¶

This library supports UTF-16LE, UTF-16BE and UTF-16 encodings. First two are straightforward, but UTF-16 is trying to be smart about endianness in the following ways:

Decoding: uses BOM and 'spaces heuristic' to determine input endianness. Default is UTF-16LE, but can be overridden with defaultEncoding: 'utf-16be' option. Strips BOM unless stripBOM: false.
Encoding: uses UTF-16LE and writes BOM by default. Use addBOM: false to override.

UTF-32 Encodings¶

This library supports UTF-32LE, UTF-32BE and UTF-32 encodings. Like the UTF-16 encoding above, UTF-32 defaults to UTF-32LE, but uses BOM and 'spaces heuristics' to determine input endianness.

The default of UTF-32LE can be overridden with the defaultEncoding: 'utf-32be' option. Strips BOM unless stripBOM: false.
Encoding: uses UTF-32LE and writes BOM by default. Use addBOM: false to override. (defaultEncoding: 'utf-32be' can also be used here to change encoding.)

Other notes¶

When decoding, be sure to supply a Buffer to decode() method, otherwise badthings usually happen.

Untranslatable characters are set to � or ?. No transliteration is currentlysupported.

Node versions 0.10.31 and 0.11.13 are buggy, don't use them (see #65, #77).

jsonwebtoken8.5.1¶

服务端 JWT 登录验证

request2.88.0¶

http 网络请求工具

socket.io¶

socket 服务端程序

uuid¶

生成 UUID

form-data2.5.1¶

A library to create readable "multipart/form-data" streams. Can be used to submit forms and file uploads to other web applications.

https://www.npmjs.com/package/form-data

jest¶

单元测试工具

https://www.npmjs.com/package/jest

🃏 Delightful JavaScript Testing

👩🏻‍💻 Developer Ready : Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.
🏃🏽 Instant Feedback : Failed tests run first. Fast interactive mode can switch between running all tests or only test files related to changed files.
📸 Snapshot Testing : Jest can capture snapshots of React trees or other serializable values to simplify UI testing.

version¶

29.7.0

downloads¶

23,497,819

repository¶

github.com/jestjs/jest

homepage¶

jestjs.io/

supertest4.0.2¶

HTTP assertions made easy via superagent. npmjs.com/package/supertest

react-codemod¶

https://github.com/reactjs/react-codemod

https://www.npmjs.com/package/react-codemod

这个库，包含一组用于 JSCodeshift 的 codemod 脚本，这些脚本有助于更新React API（便于不同版本和功能迁移）

具体案例1：把函数组件改成类组件，或者把类组件改成函数组件

npm install -g react-codemod

react-codemod class-component-to-functional-component MyComponent.jsx

这个库星星4K，周下载量1万，使用不多，是 react 社区出品的一个库，https://github.com/reactjs

问题1：class-component-to-functional-component 这个可能废弃了，现在最新版不支持使用了

问题2：某些组件更新时，可能出问题，内存溢出：FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

个人玩一下可以，不建议项目中使用

chartjs¶

chartjs

version¶

0.3.24

downloads¶

10,662

repository¶

github.com/timer/chartjs

homepage¶

github.com/timer/chartjs#readme

Chart is a simple and functional charting library which currently supports bar charts. Implementations are done on-top of a HTML5 canvas element.

excalidraw¶

一个前端画图工具，效果不错，目前项目中使用

77K stars 周下载量 7万

https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration

https://www.npmjs.com/package/@excalidraw/excalidraw

https://github.com/excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

function App() {
  return (
    <>
      <h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
      <div style={{ height: "500px" }}>
        <Excalidraw />
      </div>
    </>
  );
}

undefined

react¶

react 框架，应该是开发环境

version¶

18.3.1

downloads¶

24,266,550

repository¶

github.com/facebook/react

homepage¶

reactjs.org/

React is a JavaScript library for creating user interfaces.

The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react- dom for the web, or react-native for the native environments.

Note: by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. Don't forget to use the production build when deploying your application.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

react-chartjs-22.8.0¶

react 组件库（实现 chartjs 的功能）

react-codemirror¶

代码预览编辑高亮

https://www.npmjs.com/package/react-codemirror

周下载量1W

star 1.6K

var React = require('react');
var CodeMirror = require('react-codemirror');

var App = React.createClass({
    getInitialState: function() {
        return {
            code: "// Code",
        };
    },
    updateCode: function(newCode) {
        this.setState({
            code: newCode,
        });
    },
    render: function() {
        var options = {
            lineNumbers: true,
        };
        return (
            <CodeMirror
                value={this.state.code}
                onChange={this.updateCode}
                options={options}
            />
        )
    }
});

React.render(<App />, document.getElementById('app'));

react-cookies¶

react 实现的 cookie 管理代码没有开源，下载较少，不推荐使用

react-dnd¶

拖拽组件

react-dnd-html5-backend¶

拖拽组件

react-i18next10.12.2¶

翻译

react-konva16.8.6¶

react+canvas 绘图工具

react-mentions3.0.2¶

react 组件评论 @

react-moment0.7.9¶

react 组件库（实现 moment 的功能）

react-responsive6.1.2¶

媒体查询响应式开发（css）

react-select3.1.0¶

react 选择器组件

sw-precache-webpack-plugin0.11.4¶

SWPrecacheWebpackPlugin 是一个 webpack 插件，用于使用 service worker 缓存外部项目依赖项。它将使用 sw-precache 生成一个 Service Worker 文件并将其添加到您的构建目录中。 https://www.npmjs.com/package/sw-precache-webpack-plugin

unified7.0.0¶

AST 转换器

url-parse1.4.3¶

Url 对象转换工具

vfile3.0.0¶

解析序列化转换数据

@testing-library/user-event7.2.1¶

以与用户相同的方式触发事件 https://www.npmjs.com/package/@testing-library/user-event

@reach/router1.2.0¶

react-router 的增强版

resumablejs1.1.13¶

大文件分块上传下载

chart.js2.9.3¶

前端 canvas 绘图

classnames¶

组合 HTML 中的类名

周下载量 1000 万

const classNames = require('classnames');

classNames('foo', 'bar'); // => 'foo bar'

classNames('foo', { bar: true }); // => 'foo bar'

classNames({ 'foo-bar': true }); // => 'foo-bar'

classNames({ 'foo-bar': false }); // => ''

classNames({ foo: true }, { bar: true }); // => 'foo bar'

classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

copy-to-clipboard¶

复制内容到剪切板

https://www.npmjs.com/package/copy-to-clipboard

周下载量 500万

import copy from 'copy-to-clipboard';

copy('Text');

// Copy with options
copy('Text', {
  debug: true,
  message: 'Press #{key} to copy',
});

faker4.1.0¶

模拟请求假数据

immutability-helper3.0.0¶

react 中不可变元素复制的库

konva3.2.0¶

canvas 在线图形编辑工具

MD51.3.0¶

生成字符串对应的 md5 加密结果

merge1.2.1¶

合并对象（Object.assign）

moment2.22.2¶

时间转换显示时间处理

object-assign4.1.1¶

兼容早期浏览器中的 Object.assign

prismjs1.15.0¶

代码片段高亮

prop-types15.6.2¶

类型验证（react)

react-app-polyfill¶

This package includes polyfills for various browsers. https://www.npmjs.com/package/react-app-polyfill

react-dev-utils¶

This package includes some utilities used by Create React App. https://www.npmjs.com/package/react-dev-utils

react-dom¶

react-dom 和 HTML 元素操作工具

resolve1.10.0¶

实现节点 require.resolve() 算法，以便您可以异步和同步地代表文件 require.resolve() https://www.npmjs.com/package/resolve

semver6.0.0¶

npm 的语义版本器 https://www.npmjs.com/package/semver

ts-pnp1.1.2¶

https://www.npmjs.com/package/semver npm 的语义版本器

url-loader2.0.0¶

loader for transforms files into base64 URIs. https://www.npmjs.com/package/url-loader

number-precision¶

小数精确计算

数字精确计算，大量使用有性能问题

https://www.npmjs.com/package/number-precision

周下载量 3W，星星 4K

import NP from 'number-precision'

NP.strip(0.09999999999999998); // = 0.1

NP.plus(0.1, 0.2);             // = 0.3, not 0.30000000000000004

NP.plus(2.3, 2.4);             // = 4.7, not 4.699999999999999

NP.minus(1.0, 0.9);            // = 0.1, not 0.09999999999999998

NP.times(3, 0.3);              // = 0.9, not 0.8999999999999999

NP.times(0.362, 100);          // = 36.2, not 36.199999999999996

NP.divide(1.21, 1.1);          // = 1.1, not 1.0999999999999999

NP.round(0.105, 2);            // = 0.11, not 0.1

slugid2.0.0¶

生成 UUID

socket.io-client2.3.0¶

websocket 客户端

@testing-library/jest-dom4.2.4¶

您想使用 jest 编写测试来断言有关 DOM 状态的各种事情。作为该目标的一部分，您希望避免这样做时出现的所有重复模式。检查一个元素的属性，它的文本内容，它的 css 类，你可以命名它。 https://www.npmjs.com/package/@testing-library/jest-dom

@testing-library/react9.4.0¶

简单而完整的 React DOM 测试实用程序，鼓励良好的测试实践。 https://www.npmjs.com/package/@testing-library/react

react-is-deprecated0.1.2¶

弃用的 proptypes

react-sweet-progress¶

进度条的UI组件

https://www.npmjs.com/package/react-sweet-progress

https://github.com/nickbullll/react-sweet-progress

200多星星，周下载量1万。代码功能基本正常，但是作者6年没有更新代码了。

import { Progress } from 'react-sweet-progress';
import "react-sweet-progress/lib/style.css";

<Progress percent={88} status="success" />
<Progress type="circle" percent={100} status="success" />

reactstrap¶

UI 库

reselect¶

基于 redux 的选择器组件

ron-react-autocomplete4.0.9¶

Autocomplete component for React.

version¶

4.0.9

downloads¶

3,404

repository¶

github.com/malonecj/react-autocomplete

homepage¶

github.com/malonecj/react-autocomplete

Credits¶

React Autocomplete is free software created by Prometheus Research and is released under the MIT license.

shallowequal1.1.0¶

浅比较两个对象是否相等

whatwg-fetch3.0.0¶

window.fetch 的便携版

lodash¶

JS 工具库

version¶

4.17.21

downloads¶

52,325,095

repository¶

github.com/lodash/lodash

homepage¶

lodash.com/

The Lodash library exported as Node.js modules.

// 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');

See the package source for more details.

https://github.com/lodash/lodash/tree/4.17.21-npm

jszip¶

zip文件压缩编辑解压

A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API.

See https://stuk.github.io/jszip for all the documentation.

version¶

3.10.1

downloads¶

7,880,597

repository¶

github.com/Stuk/jszip

homepage¶

github.com/Stuk/jszip#readme

const zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");

const img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"blob"}).then(function(content) {
  // see FileSaver.js
  saveAs(content, "example.zip");
});

/*
    Results in a zip containing
    Hello.txt
    images/
        smile.gif
    */

camelcase5.2.0¶

Convert a dash/dot/underscore/space separated string to camelCase or PascalCase: foo-bar → fooBar

https://www.npmjs.com/package/camelcase

dotenv6.2.0¶

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. https://www.npmjs.com/package/dotenv

dotenv-expand4.2.0¶

Dotenv-expand adds variable expansion on top of dotenv. If you find yourself needing to expand environment variables already existing on your machine, then dotenv-expand is your tool. https://www.npmjs.com/package/dotenv-expand

is-wsl¶

如果您需要解决 WSL 中未实现或有问题的功能，这会很有用。支持 WSL 1 和 WSL 2。

https://www.npmjs.com/package/is-wsl

version¶

3.1.0

downloads¶

38,383,822

repository¶

github.com/sindresorhus/is-wsl

homepage¶

github.com/sindresorhus/is-wsl#readme

Check if the process is running inside Windows Subsystem for Linux (Bash on Windows)

Can be useful if you need to work around unimplemented or buggy features in WSL. Supports both WSL 1 and WSL 2.

import isWsl from 'is-wsl';

// When running inside Windows Subsystem for Linux
console.log(isWsl);
//=> true

axios¶

发送请求，是 promise 的封装

deep-copy¶

深拷贝引用类型变量

version¶

1.4.2

downloads¶

222,536

repository¶

github.com/simov/deep-copy

homepage¶

github.com/simov/deep-copy

var dcopy = require('deep-copy')

// deep copy object
var copy = dcopy({a: {b: [{c: 5}]}})

// deep copy array
var copy = dcopy([1, 2, {a: {b: 5}}])

dom-helpers5.1.3¶

兼容 ie9 的 DOM 操作方法

glamor2.20.40¶

css-in-js 直接在JS中写入css的样式

html2canvas1.0.0-rc.7¶

HTML 网页转换成截图

i18next17.0.13¶

翻译

i18next-browser-languagedetector3.0.3¶

翻译插件

i18next-xhr-backend3.1.2¶

翻译（从后端获取数据）

is-hotkey¶

工具库，监听键盘事件，兼容不同操作系统

周下载量80万，广泛使用

https://www.npmjs.com/package/is-hotkey?activeTab=readme

import isHotkey from 'is-hotkey'

const isSaveHotkey = isHotkey('mod+s')

function onKeyDown(e) {
  if (isSaveHotkey(e)) {
    ...
  }
}

keymirror¶

创建键和值相等的对象

这个库是 10 年前写的，从 react 源码中拿出来的，https://www.npmjs.com/package/keymirror

周下载量 20 万，实际项目使用不多

lodash.throttle4.1.1¶

lodash 的节流函数接口

promise8.0.3¶

文件上传异步转换成同步操作

qrcode.react¶

react 二维码生成器

https://www.npmjs.com/package/qrcode.react

周下载量 103万，使用广泛

import ReactDOM from 'react-dom';
import { QRCodeSVG } from 'qrcode.react';

ReactDOM.render(
  <QRCodeSVG value="https://reactjs.org/" />,
  document.getElementById('mountNode')
);

还没有集成到 react-demos 中

raf3.4.1¶

动画效果

lerna.js¶

https://www.npmjs.com/package/lerna

主要功能：将多个依赖包完美的组合在一个引用中。Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

实际项目中没有使用，了解即可

pdfjs 打印空白页的问题¶

项目中使用了 pdfjs 处理 PDF 文件预览和打印（火狐团队的第三方库）当 pdf 只有一张，谷歌浏览器打印会出现两章，第二页是空白的。

解决：page-break-after CSS 属性调整当前元素之后的分页符。把原来的 always 改成 auto 即可避免打印空白页。目前还没有测试到其他副作用。

.container {
    page-break-after: 'auto';
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-after

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-inside

debug¶

https://www.npmjs.com/package/debug

A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers.

var debug = require('debug')('http');
var http = require('http');
var name = 'My 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');

jison¶

jison：An API for creating parsers in JavaScript，语法解析器

https://www.npmjs.com/package/jison

这个库6年前写的，最近4年没有更新，周下载量8万

jison 是一个语法解析器，可以直接把 '1+ 2 + 3' 这样的字符串解析转换成数学结果返回 6，具体语法类似 Bison

本地环境基本使用

1 全局安装 `npm install jison -g` 安装成功后，全局环境可以使用 jison 这个指令

2 获取解析规则 jison 格式的文件（这里可以从官方下载 `git://github.com/zaach/jison.git/examples`，或者自己写这个规则，例如脚本解析器的内容比较简答，公式解析器内容就比较复杂，具体涉及编译原理，暂时不展开）下面是部分 jison 文件

/* eslint-disable */
/* lexical grammar */
%lex
%%
\s+                                                                                             {/* skip whitespace */}
and|AND                                                                                         {return '&';}

3 使用 jison 工具创建编译器 jison calculator.jison，然后就在当前目录下面生成一个 `calculator.js` 的文件，对外会暴露一个 Parser 类

4 准备一个计算的字符串 `echo "1 + 2 + 3" > MichaelTest`,写入文件

5 使用解析器处理这个字符串，可以获取结果 node calculator.js MichaelTest

mockjs 模拟数据¶

可以用于前后端模拟数据进行调试

const Mock = require('mockjs');
const Random = Mock.Random;

const data = Mock.mock(
    {
        id: '',
        title: Random.cparagraph(1, 5),
        time: Random.datetime('yyyy-MM-dd'),
        author: Random.cname(),
    }
);

react-to-print 处理打印¶

react-to-print 1900星使用不是很多

Print React components in the browser.

后面两个博客阅读量比较少，仅供参考，需要再说

https://juejin.cn/post/7126782670805139487

https://juejin.cn/post/7287786675517554747

React-Proto¶

面向开发人员和设计人员的原型制作工具

可以直接把一个设计层级架构，导出成文件架构

缺点：目前3K星星，最近一次6年前提交的，后期维护使用不多，仅供参考

https://github.com/React-Proto/react-proto

guppy¶

一个项目管理工具，可以可视化分析不同脚本运行情况

可视化查看第三方依赖的版本和更新情况

使用1K

react-testing-library¶

react 测试工具，使用 19k

react-testing-library

主要用于镜像测试

// __tests__/hidden-message.js
// these imports are something you'd normally configure Jest to import for you
// automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup


import '@testing-library/jest-dom'
import * as React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
import HiddenMessage from '../hidden-message'

test('shows the children when the checkbox is checked', () => {
  const testMessage = 'Test Message'
  render(
    <HiddenMessage>
        {testMessage}
    </HiddenMessage>
  )

  expect(screen.queryByText(testMessage)).toBeNull()

  fireEvent.click(screen.getByLabelText(/show/i))

  // .toBeInTheDocument() is an assertion that comes from jest-dom
  expect(screen.getByText(testMessage)).toBeInTheDocument()
})

Storybook¶

https://storybook.js.org/

帮助一个 UI 组件库用于演示如何使用的工具。最新版本是 8，项目中使用的版本是 7。

可能官方文档和现在的配置不一样 https://storybook.js.org/docs/get-started/react-vite

下面是项目的配置（7）

安装¶

    "@storybook/addon-actions": "7.6.17",
    "@storybook/addon-docs": "7.6.17",
    "@storybook/addon-essentials": "7.6.17",
    "@storybook/addon-interactions": "7.6.17",
    "@storybook/addon-knobs": "7.0.2",
    "@storybook/addon-links": "7.6.17",
    "@storybook/addon-onboarding": "1.0.11",
    "@storybook/blocks": "7.6.17",
    "@storybook/preset-create-react-app": "7.6.17",
    "@storybook/react": "7.6.17",
    "@storybook/react-webpack5": "7.6.17",
    "@storybook/test": "7.6.17",

配置¶

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  staticDirs: ['../public'],
  // 插件
  addons: [
    '@storybook/addon-actions', 
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      }
    }
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
      builder: {
        useSWC: true,
      },
    },
  }
};

.storybook/preview.js

import React from 'react';
import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    options: {
      storySort: {
        method: '',
        order: [],
        locales: '',
      }
    },
    docs: {
      page: () => (
        <>
          <Title />
          <Subtitle />
          <Description />
          <Primary />
          <Controls />
        </>
      ),
    }
  },
};

export default preview;

开启服务¶

    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build -c .storybook -o docs",

使用 UI 组件¶

stories/components/cell-editor/text-editor.stories.js

import React from 'react';
import { action } from '@storybook/addon-actions';
import TextEditor from '../../../src/TextEditor';

const meta = {
  title: 'Editors/text-editor',
  component: TextEditor,
  tags: ['autodocs'],
  decorators: [
    (Story, context) => {
      return (
        <div>
          {context.parameters.title && <h1>{context.parameters.title}</h1>}
          {context.parameters.subTitle && <p className='storybook-sub'>{context.parameters.subTitle}</p>}
          <Story />
        </div>
      );
    }
  ],
  parameters: {
    title: '',
    subTitle: '',
  }
};

export default meta;

export const Demo1 = {
  args: {
    isReadOnly: false,
    value: value,
    column: column,
    onCommit: (updated) => { action('onCommit')(updated); },
  },
  parameters: {
    subTitle: ''
  }
};

React Diff Viewer¶

https://github.com/praneshr/react-diff-viewer#install

https://praneshravi.in/react-diff-viewer/

一个 diffViewer 组件，1.3K，可以比较多个代码块的差异

未来可以用在文档编辑器中

import React, { PureComponent } from 'react';
import ReactDiffViewer from 'react-diff-viewer';

const oldCode = `
const a = 10
`;

const newCode = `
const a = 10
const boo = 10
`;

class Diff extends PureComponent {
  render = () => {
    return (
      <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
    );
  };
}

配置还支持语法高亮和自定义样式等

React 第三方库集合¶

https://github.com/enaqx/awesome-react

这个库包含了很多很多有用的第三方库，有时间可以多看多用，例如：

1、图标库：https://react-icons.github.io/react-icons/ 很多很多图标的集合 11K

printjs¶

https://printjs.crabbly.com/#documentation

https://github.com/crabbly/Print.js?tab=readme-ov-file

exif-js¶

https://www.npmjs.com/package/exif-js

从图片中提取 exif 信息（拍摄时间、拍摄位置等）

dotenv¶

https://www.npmjs.com/package/dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

可以把环境变量从 .env 文件中读出来，然后在代码中判断不同的环境，执行不同的逻辑。

S3_BUCKET="YOURS3BUCKET"

SECRET_KEY="YOURSECRETKEYGOESHERE"

在项目代码中

require('dotenv').config()

console.log(process.env)

GreaseMonkey 油猴¶

GreaseMonkey 油脂猴子，简称“油猴”，是一个浏览器插件，可以执行 JS 脚本。它们可以实现诸如自动化操作、改善用户界面、绕过限制等多种功能。

百度链接：https://baike.baidu.com/item/Greasemonkey/10727057

教程链接：

https://blog.csdn.net/qq_21561501/article/details/102696669

https://blog.csdn.net/jayandchuxu/article/details/79113755

https://blog.csdn.net/wujiayu31415/article/details/136191014

https://zhuanlan.zhihu.com/p/667584378

不同浏览器插件名称不一样，例如 Chrome ViolentMonkey 暴力猴

一个开源的用户脚本管理器，支持很多浏览器

Violentmonkey provides userscripts support for browsers. It works on browsers with WebExtensions support. It supports most scripts for Greasemonkey and Tampermonkey. Features: - Update automatically according to the meta data. - Scripts will be executed in order as shown in the list. - GM functions are supported. - Support import from and export to a zip file. - Sync to Dropbox, OneDrive, Google Drive and WebDAV!

这里提供了很多网站的功能（下载视频，复制粘贴等）例如 https://greasyfork.org/en/scripts/438182-seatable-custom-style-online

react-select¶

版本说明¶

早期版本是 2.x 曾经整理过一篇教程：https://blog.csdn.net/weixin_41697143/article/details/129011586

最新版本是 5.7.x 现在新项目都使用了这个版本，下面都是对新版本的说明

自定义内部组件和样式¶

很多场景下，我们需要改变内部组件的样式（例如产品需要去掉某个图标，改变颜色等）

可以参考这里 https://react-select.com/styles#inner-components 调整内部组件的样式

clearIndicator
container
control
dropdownIndicator
group
groupHeading
indicatorsContainer
indicatorSeparator
input
loadingIndicator
loadingMessage
menu
menuList
menuPortal
multiValue
multiValueLabel
multiValueRemove
noOptionsMessage
option
placeholder
singleValue
valueContainer

实际案例

const UserSelectStyle = {
  option: (provided, state) => {
    const { isDisabled, isFocused } = state;
    return ({
      ...provided,
      cursor: isDisabled ? 'default' : 'pointer',
      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
    });
  },
  control: (provided) => ({
    ...provided,
    fontSize: '14px',
    cursor: 'pointer',
    lineHeight: '1.5',
  }),
  indicatorSeparator: () => ({
    display: 'none',
  }),
  dropdownIndicator: () => ({
    display: 'none',
  }),
  clearIndicator: () => ({
    display: 'none',
  }),
  // multi select style
  multiValue: (provided) => {
    return {
      ...provided,
      display: 'inline-flex',
      alignItems: 'center',
      background: '#eaeaea',
      borderRadius: '10px',
      margin: '0 10px 0 0',
      padding: '0 0 0 2px',
    };
  },
  multiValueLabel: (provided) => {
    return {
      ...provided,
      padding: '0px',
    };
  },
  multiValueRemove: (provided) => {
    return {
      ...provided,
      color: '#666',
      ':hover': {
        backgroundColor: 'transparent',
        color: '#555555',
      }
    };
  },
  // single select style
  singleValue: (provided) => {
    return {
      ...provided,
    };
  },
};

然后传入 select 组件

<ReactSelect styles={UserSelectStyle}>

如果上述某些不支持，可以从css中改变

.true__value-container .true__multi-value__label {
  padding: 0px;
}

.true__value-container .select-module-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  line-height: 20px;
  margin-left: 5px;
}

.true__control.true__control--is-focused,
.true__control.true__control--is-focused:hover {
  background-color: #ffffff;
  border-color: #1991eb;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
}

@antv/g2¶

统计图

多张图片预览

antd-mobile¶

阿里出品的移动端 UI 组件库

https://www.npmjs.com/package/antd-mobile

https://github.com/ant-design/ant-design-mobile

周下载量 2万，国内使用广泛

主要组件和案例（待完善）

<ActionSheet />
<Button />

个人案例演示：https://michael18811380328.github.io/react-demos/antd/

个人案例源码：https://github.com/Michael18811380328/react-demos/blob/master/src/routes/29-antd.jsx

注意版本升级后的 css 自定义：https://stackoverflow.com/questions/74529378/antd-5-module-not-found-error-cant-resolve-antd-dist-antd-less/74529656#74529656

autoprefixer¶

自动增加 css 前缀，兼容不同版本浏览器

fs-extra¶

fs 的高级版本

https://www.npmjs.com/package/fs-extra

express¶

中间层服务器

express-rate-limit¶

请求次数限制

response-time¶

HTTP 响应时间 nodejs 和 express 联合使用

rimraf¶

The UNIX command rm -rf for node. https://www.npmjs.com/package/rimraf

sharp¶

https://www.npmjs.com/package/sharp

nodejs 中图片工具库，可以生成特定的图片（批量生成随机图片），或者图片格式转换等等

// npm install sharp
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
const util = require('util');

const mkdir = util.promisify(fs.mkdir);
const writeFile = util.promisify(fs.writeFile);

const IMAGE_WIDTH = 800; // 图片宽度
const IMAGE_HEIGHT = 600; // 图片高度
const IMAGE_COUNT = 1000; // 图片数量
const OUTPUT_DIR = 'random_images'; // 输出目录

async function createRandomImage(filename) {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);

  const image = await sharp({
    create: {
      width: IMAGE_WIDTH,
      height: IMAGE_HEIGHT,
      channels: 4,
      background: { r: red, g: green, b: blue, alpha: 255 }
    }
  });

  await image.toFile(filename);
}

async function main() {
  try {
    await mkdir(OUTPUT_DIR, { recursive: true });

    for (let i = 0; i < IMAGE_COUNT; i++) {
      const filename = path.join(OUTPUT_DIR, `${i}.png`);
      await createRandomImage(filename);
    }
  } catch (error) {
    console.error(error);
  }
}

main();

tesseract¶

Tesseract 是一款由 Google 开发的开源 OCR（光学字符识别）库。它可以识别图片中的文字，并将其转换为可编辑的文本格式。

如果您想要使用 Tesseract 识别图片并将输出重定向到另一个文件，您可以使用命令行界面来执行这个操作。以下是一个基本的命令行示例，它演示了如何使用 Tesseract 识别图片并将结果保存到文本文件中：

tesseract input.png output -l eng --oem 3 --psm 3 && echo "OCR Completed."

tesseract 1.png output -l chi_sim --psm 6 && cat ./output.txt

在这个命令中：

input.png 是需要进行 OCR 处理的图片文件。
output 是输出文本文件的文件名，不需要带有 .txt 扩展名，Tesseract 会自动添加。
-l eng 指定使用英文训练数据。
--oem 3 启用老式布局分析模式（LSTM-only）。OEM：OCR Engine Mode：引擎模式，取值 0123。 0：3.x以前的识别引擎 1：神经网络LSTM的识别引擎 2：混合模式，传统+LSTM 3：默认，那种支持就用那种
--psm 3 设置页面分割模式，这里设置为只有文本。PSM：Page Segmentation Mode，对每页文档进行结构化分析，默认的PSM的选项参数位PSM_AUTO=3

参考：https://cloud.tencent.com/developer/article/2205370

如果您想将输出重定向到一个文件

tesseract input.png output -l eng --oem 3 --psm 3 > newfile.txt && echo "OCR Completed."

在这两个示例中，输出都会被重定向到指定的文件，而不是打印到控制台。如果您想同时将输出保存到文件并在控制台上查看，可以使用 tee 命令。

tesseract input.png output -l eng --oem 3 --psm 3 | tee output.txt && echo "OCR Completed."

请确保您的系统上安装了 Tesseract-OCR，并且可以通过命令行访问 tesseract 命令。

1、brew install

2、下载中文识别包 brew install tesseract-lang

其他参考：

https://blog.csdn.net/s_ongfei/article/details/136500069

https://blog.csdn.net/qq_39522120/article/details/135503159

本地测试可以这样弄，然后写一个 bash 脚本循环

tesseract input.png output -l chi_sim --psm 3

使用 Tesseract 进行前端 ORM¶

嵌入 React 应用中

"tesseract.js": "^5.1.0",

import { createWorker } from 'tesseract.js';

const URLS = [
  'https://cloud.seatable.cn/seafhttp/files/628ad059-0a07-4dc4-a675-7ae2a1f15d81/image-1720508732396.png',
];

export default function Contact() {

  (async () => {
    const worker = await createWorker('chi_sim');
    for (let i = 0; i < URLS.length; i++) {
      const URL = URLS[i];
      const ret = await worker.recognize(URL);
      console.log(i);
      console.log(ret.data.text.replace(/[\s]/ig, ''));
    }
    await worker.terminate();
  })();

  return (
    <div id="contact"></div>
  );
}

nodejs 脚本

import { createWorker } from 'tesseract.js';

const URLS = [
  'https://cloud.seatable.cn/seafhttp/files/628ad059-0a07-4dc4-a675-7ae2a1f15d81/image-1720508732396.png',
];

(async () => {
  const worker = await createWorker('chi_sim');
  for (let i = 0; i < URLS.length; i++) {
    const URL = URLS[i];
    const ret = await worker.recognize(URL);
    console.log(i);
    console.log(ret.data.text.replace(/[\s]/ig, ''));
  }
  await worker.terminate();
})();

nodejs 批量 OCR 结果

const fs = require('fs');
const { exec } = require('child_process');

// 批量 ORM 图片文件(默认图片，识别效率不太高)
var runNodes = async function(files, father_path) {
  for (let i = 0; i < files.length; i++) {
    const URL = father_path + '/' + files[i];
    const command = `tesseract ${URL} output -l chi_sim --oem 3 --psm 3 && cat output.txt > ${i}.md`
    await exec(command, (error, stdout, stderr) => {
      if (error) {
        console.error(`执行的错误: ${error}`);
        return;
      }
      console.log(`stdout: ${stdout}`);
      if (stderr) {
        console.error(`stderr: ${stderr}`);
      }
    });
  }
}

const path = './images';

// check path valid (user input path may not valid)
if (!fs.existsSync(path)) {
  console.log(`${path} is invalid`);
  return;
}

var files = fs.readdirSync(path);

runNodes(files, path);

python 脚本

import pytesseract
from pathlib import Path
from PIL import Image

def ocr(filename):
    pth = Path(filename)
    image = Image.open(filename)

    # 图片二值化
    image = image.convert('L')
    # 可以定义阈值
    threshold = 200
    table = []
    for i in range(256):
        if i < threshold:
            table.append(0)
        else:
            table.append(1)
    # 识别图片
    curdir = pth.parent

    tessdata_dir_config = f'--tessdata-dir "{curdir}"'
    content = pytesseract.image_to_string(
        image, lang='chi_sim', config=tessdata_dir_config,)  # 使用简体中文解析图片
    print(content)

ocr('/root/dev/gotoolkits/figures/python-ocr-02.png')

问题和不足¶

如果识别清晰的截图，准确率能到 100%

如果截图中有其他的画笔颜色，或者图形比较多，那么准确率不太高，这种还需要手动处理

Last update: September 30, 2024

JS第三方库¶

husky¶

@babel/cli7.4.4¶

@babel/plugin-proposal-class-properties7.4.4¶

@babel/plugin-proposal-export-default-from7.5.2¶

@babel/plugin-proposal-export-namespace-from7.5.2¶

@babel/plugin-proposal-object-rest-spread7.5.2¶

@babel/plugin-transform-member-expression-literals7.2.0¶

@babel/plugin-transform-property-literals7.2.0¶

@babel/plugin-transform-runtime7.4.4¶

@babel/preset-env7.4.5¶

@babel/preset-react7.0.0¶

@svgr/webpack4.1.0¶

@babel/core7.5.0¶

@babel/node7.5.0¶

@babel/plugin-transform-modules-commonjs7.5.0¶

@babel/register7.4.4¶

@babel/runtime7.8.3¶

webpack-node-externals¶

babel-eslint¶

babel-jest¶

babel-loader¶

babel-plugin-named-asset-import¶

babel-preset-react-app¶

case-sensitive-paths-webpack-plugin¶

css-loader¶

enzyme¶

enzyme-adapter-react-¶

eslint¶

eslint-config-react-app¶

eslint-loader¶

eslint-plugin-flowtype¶

eslint-plugin-import¶

eslint-plugin-jsx-ay¶

eslint-plugin-react-hooks¶

html-webpack-plugin-beta¶

identity-obj-proxy¶

jest-environment-jsdom-fourteen¶

jest-resolve¶

jest-watch-typeahead¶

less¶

less-loader¶

mini-css-extract-plugin¶

optimize-css-assets-webpack-plugin¶

pnp-webpack-plugin¶

postcss-flexbugs-fixes¶

postcss-loader¶

postcss-normalize¶

postcss-preset-env¶

postcss-safe-parser¶

sass-loader¶

style-loader¶

terser-webpack-plugin¶

webpack¶

webpack-cli¶

webpack-dev-server¶

webpack-manifest-plugin¶

workbox-webpack-plugin¶

eslint-plugin-react¶

file-loader¶

resolve-url-loader¶

webpack-bundle-tracker¶

babel-register¶

clean-webpack-plugin¶

webpack-merge¶

grunt¶

gulp¶

video.js7.4.1¶

watermark-dom¶

@typescript-eslint/eslint-plugin2.2.0¶

@typescript-eslint/parser2.2.0¶

connect-multiparty2.2.0¶

csv¶

version¶

downloads¶

repository¶

homepage¶

Usage¶

Sample¶

Development¶