Compatible patches – (Let your code run free in IE)
| The package name | role |
|---|---|
| regenerator-runtime | Provide Babel compiled async and Genertor and other functions concrete implementation |
| The previous generation of browsers polyfill library | |
| core-js@3 | A fairly complete Polyfill assembly |
| Es5, JSX syntax converter | |
| Previous generation compatible syntax converter | |
| @babel/standalone | Run in the browser total compiler compatible with older browser packages |
| @babel/runtime | Runtimes containing Babel and Regenerator-Runtime |
| Contains Babel runtime +core-js@2 | |
| @babel/runtime-corejs3 | Contains Babel runtime +core-js@3 |
| Compatible with new API feature components, load Polyfill | |
| @babel/plugin-transform-runtime | Compile and import PloyFill on demand with @babel/ Runtime-corejs3 |
| @babel/preset-env | Contains default packages that import code on demand and automatically convert code based on the browser |
| eventsource | eventsource polyfill |
| event-source-polyfill | eventsource polyfill |
| js-polyfills | JavaScript Polyfills |
| history | Use JavaScript to manage session history |
| html5shiv | : HTML5 JavaScript patch for Internet Explorer, designed to make Internet Explorer recognize and support HTML5 elements |
| normalize.css | Modern alternative to CSS reset |
| respond | Let the browser support CSS3 media query code block procedures |
| modernizr | HTML5 and CSS3 features for detecting users’ browsers |
| pathseg | This is a direct replacement for the SVGPathSeg, SVGPathSegList, and getPathSegAtLength apis that were removed from SVG2 |
CSS preprocessing – (CSS is freely written in fancy style to increase readability)
| The package name | role |
|---|---|
| less | A preprocessor that is simple to learn but not very flexible |
| sass | Preprocessors that are powerful but difficult to configure in older environments |
| stylus | A preprocessor that is more dynamic, reads more succinctly but doesn’t seem to be very popular |
| postcss | Make your CSS compatible with some post-processing solutions |
Media –Audio, video you want to see the wonderful browser world)
| The package name | role |
|---|---|
| cplayer | Beautiful clean HTML5 WEB music player |
| aplayer | Beautiful HTML5 music player |
| xgplayer | Watermelon video player |
| dplayer | HTML5 bullet screen video player |
| plyr | Simple, accessible and customizable media player for video, audio, YouTube and Vimeo |
| howler | A Javascript audio library for the modern web |
| video.js | Open source HTML5 and Flash video player |
| flv.js | HTML5 FLV Player |
| hls.js | HLS can be played in a browser that supports MSE |
| adapterjs | Create a generic API for WebRTC in your browser |
| asciinema-player | Network player for terminal session logging |
| crunker | An easy way to merge or connect Audio files using the Web Audio API |
| recorder-core | Js Recording MP3 WaV OGG WebM AMR format |
| js-audio-recorder | Html5 JS Web recording |
| live2d | Live2d task model rendering engine |
| op-rec | Record, play back, and save user actions in any interface using powerful apis provided by modern browsers |
| wavesurfer.js | Navigable waveform based on Web Audio and Canvas |
| wfplayer | Audio waveform generator |
| photoswipe | JavaScript image library for mobile and desktop |
| viewerjs | Image viewer |
| smartphoto | The easiest to use responsive image viewer, especially for mobile devices |
| tui-image-editor | Image editor |
Document Processing – (Uploading, saving and processing files is so easy)
| The package name | role |
|---|---|
| simple-uploader.js | Support multiple concurrent upload, folder, drag, pause to continue, second transmission, block upload, error automatic retransmission, manual retransmission, progress, remaining time, upload speed and other features |
| @flowjs/flow.js | Multiple synchronous, stable, fault tolerant, and recoverable/rebootable file uploads via HTML5 file APIS |
| @uppy/core | Open source javascript file uploader |
| @zip.js/zip.js | A JavaScript library for compressing and decompressing files in the browser and Deno |
| clipboard | Web clipboard processing plug-in |
| compressorjs | Image compressor |
| copy-to-clipboard | Copy content from the browser to the clipboard using JS |
| cropperjs | Image clipper |
| croppr | Lightweight, awesome, absolutely zero dependency native JavaScript image clipper |
| dom-to-image | Generate images from DOM nodes using HTML5 canvas |
| dropzone | Push and drop upload components |
| exif-js | A JavaScript library for reading EXIF image metadata |
| ffmpeg.js | FFmpeg port with Emscripten for audio clipping or processing |
| file-saver | HTML5 file saving tool |
| filepond | File upload processing plug-in |
| html2canvas | The DOM is rerendered using Canvas to generate images |
| id3js | JavaScript ID3 tag parser for Node and browser |
| image-conversion | Simple easy to use JS picture conversion tool, can specify the size to compress the picture |
| js-export-excel | Front-end export Excel spreadsheet tool |
| js-qr | Pure javascript two-dimensional code recognition library |
| qrcode | Two-dimensional code generator |
| qrcodejs2 | Cross-browser QRCode generator for JavaScript |
| awesome-qr | Interesting QR code generator written in JavaScript |
| jsbarcode | Bar code generation plug-in |
| jspdf | Generating PDF files |
| namedavatar | An SVG avatar image generated by the name text |
| soundjs | A Javascript library for processing audio |
| stackblur-canvas | Fast implementation of Gaussian blur |
| konva | HTML5 2D Canvas library for desktop/mobile applications |
| zrender | Two-dimensional drawing engine, it provides Canvas, SVG, VML and other rendering methods |
| canvg | JavaScript SVG parser and renderer on Canvas |
Verify security – (Safe website construction is the first big problem)
| The package name | role |
|---|---|
| crypto-js | Encryption standard JavaScript library |
| SparkMD5 | Front-end MD5 authentication and encryption tool |
| miao-lang | Meow translation: Translation of human language into meow language |
| unescape | Convert HTML entities to HTML characters, for example>= >> |
| uuid | Generate unique IDS |
| js-base64 | Another Base64 transcoder in pure JS |
The form –What could be a more mundane need)
| The package name | role |
|---|---|
| async-validator | Validate the form asynchronizer |
| validator.js | Provides powerful object and string validation for Node and browsers in JavaScript |
| yup | Simple object validator |
Drag and drop –Page elements are not dead; they can sometimes move)
| The package name | role |
|---|---|
| @shopify/draggable | Drag-and-drop JavaScript library |
| sortablejs | Reordered drag-and-drop list for modern browsers and touch devices |
Content simulation – (Fake data, fake interfaces, everything can be forged)
| The package name | role |
|---|---|
| ajax-hook | Intercepts AJAX requests made by the browser by XMLHttpRequest |
| chance | Random content generation assistant |
| loremIpsum | Module that generates placeholder text to generate paragraphs, words, sentences |
| mockjs | Analog data generator |
| superb | Get great words |
| the-answer | The answer to life, the universe and everything |
Template Engine – (Both the front end and the back end can take advantage of templates)
| The package name | role |
|---|---|
| art-template | High-performance JavaScript template engine |
| dot | The fastest + compact javascript template engine for NodeJS and browsers |
| nunjucks | Powerful template engine with inheritance, asynchronous control, and more (inspired by Jinja2) |
| ejs | Embedded JavaScript templates |
| handlebars | HBS smallest template engine |
| pug | Indent template rendering engine |
Mobile – (Small screen has big wonderful)
| The package name | role |
|---|---|
| fastclick | Eliminate click delays in browsers that use touch UI |
| hammer.js | Javascript library for multi-touch gestures |
| alloyfinger | Ultra-small multi-touch gesture library for the web |
| phy-touch | Silky smooth touch motion scheme |
| @better-scroll/core | Mobile scrolling plug-in |
| eruda | Mobile browser console |
| vconsole | A lightweight, scalable front-end developer debug panel for mobile web |
| interactjs | JavaScript drag-and-drop, resizing, and multi-touch gestures for modern browsers (and IE9+) |
| Mobile end rolling plug-in, complete inertia rolling and rebound effect | |
| mescroll.js | Delicate pull-down refresh and pull-up load JS framework. Vue support, perfect for mobile and mainstream PC browsers |
Visualization – (Fancy display data)
| The package name | role |
|---|---|
| @antv/g6 | Graphic Visualization framework |
| chart.js | Everything you need to build beautiful charts using chart.js |
| chroma-js | A JavaScript library for various color manipulations |
| tinycolor | Fast and compact color processor |
| color-js | Color management API for javascript |
| d3 | Data-driven Documents, complete a series of graphics drawing |
| echarts | Front-end charting library |
| g2 | Highly interactive data-driven visual syntax for statistical charts |
| gsap | GreenSock’s GSAP JavaScript animation library (including Draggable) |
| p5 | A library with many tools makes it easy for hobbyists, artists, and designers to do creative programming in the JavaScript language |
| particles.js | A lightweight JavaScript library for creating particle animations |
| canvas-nest.js | Interactive particle/nesting system with JavaScript and Canvas |
Animation processing – (While native works well, I don't mind using a better animation scheme)
| The package name | role |
|---|---|
| @mojs/core | Dynamic graphics tool library for the Web |
| animejs | JavaScript animation engine |
| countup.js | Animate a numerical value by counting |
| move-js | CSS3 supported JavaScript animation framework |
| pixi.js | HTML5 Creation engine: Create beautiful digital content using the fastest and most flexible 2D WebGL renderer |
| popmotion | A simple animation library for pleasing user interfaces |
| termynal | Lightweight and modern terminals display animations using async/await |
| threejs | Animation processing library |
| @tweenjs/tween.js | Animation tween engine |
| velocity-animate | Accelerated JavaScript animation |
| vivusv | A JavaScript library to animate drawings in SVG |
| create-keyframe-animation | Dynamically generate CSS keyframe animations in a browser using JavaScript |
Rich text – (Get your site users to upload prettier text)
| The package name | role |
|---|---|
| @ckeditor/ckeditor5-build-classic | Advanced rich text editor that supports multi-person collaboration |
| @toast-ui/editor | Markdown wySIWYG editor |
| ckeditor | Best enterprise class WYSIWYG rich text editor |
| codemirror | Code editor |
| editor.md | Open source embedded online Markdown editor |
| markdown-it | Markdown parser |
| marked | Markdown document renderer |
| monaco-editor | Browser-based code editor |
| tinymce | Rich text editor |
| vditor | Browser-side Markdown editor with support for WYSIWYG (rich text), instant rendering (similar to Typora) and split screen preview mode |
| wangEditor | Lightweight Web rich text editor |
Website Interaction – (Powerful interactions make it easy for users to navigate the site)
| The package name | role |
|---|---|
| @docsearch/js | The easiest way to add a search to a document is similar to the vUE official website search |
| driver.js | The page is step-by-step guided |
| fastscan | Quick text search by Ahocorasick algorithm |
| fuse.js | Lightweight fuzzy search |
| swiper | Often used for touch sliding of content on websites |
| fullpage.js | Full screen switch plug-in |
| pageswitch | The applicable scene is full-screen switching, that is, all one screen, and more than 100 switching effects have been realized on this basis |
| touchslider | Slideshow slider effect |
| tippy.js | Tooltips, pop-ups, drop-down menus and menu libraries, Tooltip, popover, Dropdown, and Menu Library |
| @popperjs/core | Location prompts and pop-up box tools |
| gridmanager | Table control, support a variety of development environment |
| handsontable | A JavaScript data grid with a spreadsheet look |
| headroom.js | Leave more space at the top of the page and hide the header when it is not needed |
| prismjs | Lightweight, robust, elegant syntax highlighting |
| highlight.js | JavaScript syntax highlighting with automatic language detection and zero dependencies |
| intro.js | Lightweight, user-friendly user step guide library |
| js-web-screen-shot | Web Side custom screenshot (native JS version) |
| jsplumb | Chart workflow, and so on |
| nprogress | Display top progress bar plugins such as YouTube, Medium, etc |
| panzoom | General panning and scaling libraries (DOM, SVG, custom) |
| screenfull | A simple wrapper for using the JavaScript Fullscreen API across browsers |
| print-js | A small javascript library to help print from the web |
| wowjs | Displays CSS animations when scrolling down the page |
| scrollmagic | Javascript library for magical scrolling interaction |
| scrollreveal | Animates an element as it scrolls into a view |
| spin.js | Rotary activity indicator |
| web-highlighter | A non-runtime dependent library for highlighting and persisting text on any web site |
| web-vitals | Health site’s basic metrics meter |
| xterm | A terminal for the web |
| favicon.js | Use captions, images, or videos on your web ICONS |
| premonish | Predict which DOM element the user will interact with next |
| typed.js | Provides typing animation library |
| darkmode-js | Add dark mode/night mode to your site in seconds |
| select | Text to programmatically select HTML elements |
| toggle-selection | A simple module exposure function that unselects the current browser selection and returns the function that restores the selection |
Utility tools – (It's better to bring it than to package it yourself)
| The package name | role |
|---|---|
| axios | Implement the Ajax request plug-in |
| jsonp | Simple JSONP implementation |
| hooker | Monkey patch (hook) functions for debugging and other things |
| console.table | Add the console.table method to print the array of objects as tables in the console |
| console-ban | Prohibit F12 / review open console, protect site resources, reduce crawler and attack lightweight solution, support redirection, rewrite, customize a variety of policies |
| jdetects | Check whether DevTools is enabled |
| devtools-detect | Check whether DevTools is on and in its direction |
| devtools-detector | Check whether DevTools is enabled |
| array-move | Move the array item to another location |
| cnchar | Simplified Chinese pinyin, polyphonic characters, tones, strokes and other functions |
| moment | Time and date processing library |
| dayjs | Moment.js’s 2kB lightweight solution has an equally powerful API, time and date handling library |
| deep-diff | A Javascript utility for computing depth differences, capturing changes, and applying changes across objects |
| virtual-dom | Virtual DOM and difference algorithms |
| dom-iterator | A rich, well-tested iterator for traversing DOM nodes |
| element-resize-detector | Optimized cross-browser resizing listeners for elements |
| chai | An assertion framework that can be paired with any test framework |
| web-storage-cache | LocalStorage and sessionStorage have been extended to add timeout, serialization methods |
| good-storage | A repository that uses the same API to support sessionStorage and localStorage |
| localforage | Offline storage, improved. Wrap IndexedDB, WebSQL, or localStorage with a simple but powerful API |
| immer | Create the next immutable state by changing the current state |
| immutable | Immutable, persistent data collection for increased efficiency and simplicity |
| updeep | Easily update nested frozen objects and arrays in a declarative and immutable manner |
| js-cookie | Lightweight browser-side cookie manipulation library |
| lazyload | Image lazy loading |
| vanilla-lazyload | Lightweight, flexible scripts that speed up your website by postponing the loading of folded images, backgrounds, videos, iframes, and scripts until the time they enter the viewport |
| rxjs | Reactive programming library for JavaScript |
| xe-utils | Javascript function libraries, utility classes |
| lodash | A consistent, modular, high-performance JavaScript utility library |
| underscore | JavaScript utility library, provides a set of functional programming utility functions |
| mitt | Tiny 200-byte function event emitters/publish subscriptions |
| omit.js | Utility function to create shallow copies of objects with some fields removed |
| prettier | Formatting displays beautiful code |
| qs | Used to parse URL parameters |
| stringify-object | Stringing an object/array like json.stringify just doesn’t have all the double quotes |
| await-to-js | Asynchronous wait wrappers that easily handle errors without a try-catch |
| big.js | A small, fast JavaScript library for arbitrary precision decimal arithmetic |
| leven | The Levenshtein distance algorithm measures the difference between two strings with the fastest JS implementation |
| humanize-string | Convert the humped/dash/underscore string to a humanized string: foobar-baz_faz → Foo bar baz faz |
| string-format | Format output string |
| numeral | A javascript library for formatting and manipulating numbers |
| pluralize | Plural or singular any word according to the count |
| filesize | Gets a human-readable file-size string from a number (floating point or integer) or a string |
| pretty-bytes | Beautify the bytes output string |
| pretty-ms | Beautify the MS output string |
| mathjs | Extended math library for JavaScript and Node.js |
| lyric-parser | Javascript based lyrics parser |
| window-watcher | Easy to listen for window width changes |
| get-css-translated-position | Gets the location of the DOM element positioned using CSS Translate |
| adaptive-quadratic-curve | Construct adaptive conics |
| tiny-emitter | A small (less than 1K) library of event emitters |
Modular – (Modern front-end development)
| The package name | role |
|---|---|
| requireJS | Modular processing tools based on AMD specifications |
| seajs | Modular processing tool based on CMD specification |
Continuously updated…
- Reference: Look at the cloud
- Open source: Gitte