网站首页 > 知识剖析正文

周均下载百万的TOP 12前端 Ponyfill !

nixiaole 2025-06-12 15:07:13 知识剖析 2 ℃

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是周均下载百万+的TOP 12前端 Ponyfill，不了解polyfill、ponyfill的可以预先阅读我的另外一篇文章：

《前端 Polyfill、Ponyfill、Prollyfill 傻傻分不清楚？》

话不多说，直接开始！

什么是Ponyfill

和Polyfill相比，ponyfill 的做法更聪明一些：它不会污染全局范围，而是将功能导出为模块。例如，一个 Number.MAX_SAFE_INTEGER ponyfill 的例子可以是：

Bash

module.exports = 9007199254740991
// 使用模块导出

重要的是不要在 ponyfill 实现中使用本地方法，因为环境差异，这些方法可能表现不同。如果你想使用本地方法，你可以将它包装在模块 escope 之外：

Bash

const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || require('number-max-safe-integer')
// 做下代码兼容

了解了Polyfill以及实现Polyfill的注意事项后，接下来一起看看有哪些热门的前端Polyfill。

es6-symbol

ECMAScript 6 Symbol polyfill。如果开发者想在 Symbol 存在时使用原生版本，如果它不存在则回退到 ponyfill，可以使用 es6-symbol 如下：

var Symbol = require('es6-symbol');

如果想在全局环境中使用 Symbol，可以通过下面的方式：

require('es6-symbol/implement');

如果想一直使用 polyfill，即使原生 Symbol 存在，可以通过下面方式:

var Symbol = require('es6-symbol/polyfill');

下面是使用 es6-symbol 的完整示例。

var Symbol = require('es6-symbol');
var symbol = Symbol('My custom symbol');
var x = {};

x[symbol] = 'foo';
console.log(x[symbol]);
('foo');

// Detect iterable:
var iterator, result;
if (possiblyIterable[Symbol.iterator]) {
  iterator = possiblyIterable[Symbol.iterator]();
  result = iterator.next();
  while (!result.done) {
    console.log(result.value);
    result = iterator.next();
  }
}

目前 es6-symbol 在 NPM 的周平均下载量达到了 11,150K，超过了 1115W。

object-assign

ES2015 Object.assign() 的 ponyfill。Node.js 4 及更高版本，以及主流浏览器（Chrome、Edge、Firefox、Opera、Safari）都支持 Object.assign() ，但是 object-assign 这个包可用于兼容更糟糕的浏览器、Node 环境。使用方法如下：

const objectAssign = require('object-assign');

objectAssign({ foo: 0 }, { bar: 1 });
//=> {foo: 0, bar: 1}

// multiple sources
objectAssign({ foo: 0 }, { bar: 1 }, { baz: 2 });
//=> {foo: 0, bar: 1, baz: 2}

// overwrites equal keys
objectAssign({ foo: 0 }, { foo: 1 }, { foo: 2 });
//=> {foo: 2}

// ignores null and undefined sources
objectAssign({ foo: 0 }, null, { bar: 1 }, undefined);
//=> {foo: 0, bar: 1}

目前 object-assign 在 NPM 的周平均下载量达到了 35,883K，超过了 3500W。

path-parse

用于 Node.js 环境的 path.parse(pathString) 的 ponyfill，基础用法如下：

var pathParse = require('path-parse');
pathParse('/home/user/dir/file.txt');
//=> {
//       root : "/",
//       dir : "/home/user/dir",
//       base : "file.txt",
//       ext : ".txt",
//       name : "file"
//   }

目前 path-parse 在 NPM 的周平均下载量达到了 35,664K，超过了 3566W。

es6-weak-map

受到 Mark Miller 和 Kris Kowal 的 WeakMap 实现的启发。区别是：

假设有兼容的 ES5 环境（没有奇怪的 ES3 解决方法或 hack）
良好的模块化 CJS 风格
基于独立的解决方案

如果想确保您的环境实现了 WeakMap，请执行以下操作：

require('es6-weak-map/implement');

如果想在本地版本存在时使用它，如果不存在则回退到 polyfill，但又不想在全局范围内实现 WeakMap，请执行以下操作：

var WeakMap = require('es6-weak-map');

如果即使原生 WeakMap 存在，你也确实想使用 polyfill，请执行以下操作：

var WeakMap = require('es6-weak-map/polyfill');

下面是使用 es6-weak-map 的完整示例:

var WeakMap = require('es6-weak-map');
var map = new WeakMap();
var obj = {};

map.set(obj, 'foo'); // map
map.get(obj); // 'foo'
map.has(obj); // true
map.delete(obj); // true
map.get(obj); // undefined
map.has(obj); // false
map.set(obj, 'bar'); // map
map.has(obj); // false

目前 es6-weak-map 在 NPM 的周平均下载量达到了 5,622K，超过了 560W。

array-find

ES 2015 Array.find 的 ponyfill，用于查找数组元素。为每个元素执行回调，返回其回调返回真值的第一个元素。用法如下：

var find = require('array-find');
var numbers = [1, 2, 3, 4];

find(numbers, function (element, index, array) {
  return element === 2;
});
// => 2

var robots = [{ name: 'Flexo' }, { name: 'Bender' }, { name: 'Buster' }];

find(robots, function (robot, index, array) {
  return robot.name === 'Bender';
});
// => {name: 'Bender'}

find(robots, function (robot, index, array) {
  return robot.name === 'Fry';
});
// => undefined

目前 array-find 在 NPM 的周平均下载量达到了 1,433K，超过了 140W。

array-from

ES 2015 Array.from() 的 ponyfill，与 ES 2015 规范保持一致。

var arrayFrom = require('array-from');
  // You’ll get the native `Array.from` if it’s available.

function () {console.log(
  arrayFrom(arguments).map(require('1-liners/increment'))
);}(1, 2, 3);
//>> [2, 3, 4]

也可以将其用作经典的 polyfill，虽然不推荐，但有时确实实用：

if (!Array.from) Array.from = require('array-from');
  // This will affect all loaded modules.
function () {console.log(
  Array.from(arguments).map(require('1-liners/increment'))
);}(1, 2, 3);
//>> [2, 3, 4]

目前 array-from 在 NPM 的周平均下载量达到了 1,984K，超过了 190W。

es6-map

ECMAScript6 中指定 Map 集合的 ponyfill，使用 es6-map 作为 ponyfill 是最安全的，它是一个不接触全局对象的 polyfill：

var Map = require('es6-map');

如果想确保全局环境存在 Map，请执行以下操作：

require('es6-map/implement');

如果即使原生 Map 存在，你也确实想使用 polyfill，请执行以下操作：

var Map = require('es6-map/polyfill');

目前 es6-map 在 NPM 的周平均下载量达到了 1,596K，超过了 159W。

array-find-index

ES2015 Array#findIndex()的 ponyfill，由前端大神 Sindre Sorhus 编写，用法如下:

const arrayFindIndex = require('array-find-index');

arrayFindIndex(['rainbow', 'unicorn', 'pony'], (x) => x === 'unicorn');
//=> 1

目前 array-find-index 在 NPM 的周平均下载量达到了 7,655K，超过了 760W。

@whatwg-node/fetch

Fetch 标准的 ponyfill 包。如果 JavaScript 环境本身没有实现这个标准，这个包会自动填充缺失的部分，并将它们导出为一个模块，否则它会在不触及环境内部的情况下导出原生的 fetch。它还导出 Fetch 标准所需的一些额外的标准 API。

下面示例使用 Fetch API 处理文件上传：

import { Request } from '@whatwg-node/fetch';

// See how you can handle file uploads with Fetch API
http.createServer(async (req, res) => {
  const request = new Request(req);
  const formData = await request.formData();
  const file = formData.get('file');
  // ...
});

下面示例限制表单数据大小：

import { createFetch } from '@whatwg-node/fetch';

const fetchAPI = createFetch({
  formDataLimits: {
    // Maximum allowed file size (in bytes)
    fileSize: 1000000,
    // Maximum allowed number of files
    files: 10,
    // Maximum allowed size of content (operations, variables etc...)
    fieldSize: 1000000,
    // Maximum allowed header size for form data
    headerSize: 1000000,
  },
});

// See how you can handle file uploads with Fetch API
http.createServer(async (req, res) => {
  const request = new Request(req);
  const formData = await request.formData();
  const file = formData.get('file');
  // ...
});

目前 @whatwg-node/fetch 在 NPM 的周平均下载量达到了 3,656K，超过了 360W。

css-vars-ponyfill

css-vars-ponyfill 为遗留和现代浏览器中的 CSS 自定义属性（又名“CSS 变量”）提供客户端支持。

/* style.css */

:root {
  --a: var(--b); /* Chained */
  --b: var(--c);
  --c: 10px;
}

div {
  color: var(--color); /* from <style> */
  margin: var(--unknown, 20px); /* Fallback */
  padding: calc(2 * var(--a)); /* Nested */
}

使用首选选项调用 ponyfill：

/* main.js */

cssVars({
  // Options...
});

输出结果如下:

div {
  color: black;
  margin: 20px;
  padding: calc(2 * 10px);
}

目前 css-vars-ponyfill 在 NPM 的周平均下载量达到了 143K，超过了 14W。

path-dirname

Node.js 的 path.dirname() ponyfill，这是为了在 Node.js v0.10 上导出 path.posix.dirname() 所必需的。

const pathDirname = require('path-dirname');

pathDirname('/home/foo');
//=> '/home'
pathDirname('C:\\Users\\foo');
//=> 'C:\\Users'
pathDirname('foo');
//=> '.'
pathDirname('foo/bar');
//=> 'foo'

//Using posix version for consistent output when dealing with glob escape chars
pathDirname.win32('C:\\Users\\foo/\\*bar');
//=> 'C:\\Users\\foo/'
pathDirname.posix('C:\\Users\\foo/\\*bar');
//=> 'C:\\Users\\foo'

目前 path-dirname 在 NPM 的周平均下载量达到了 12,776K，超过了 1270W。

fromentries

Object.fromEntries() 的 ponyfill。现有的 polyfill 包（如 object.fromentries）引入了一堆依赖项，并增加了超过 8 KB 的浏览器包大小，从而可以在 IE6 等 ES3 环境中工作，但也有点矫枉过正，因为几乎没有人支持 IE6 了。

fromentries 使用现代语言功能在几行代码中实现此功能的 polyfill。

const fromEntries = require('fromentries');

const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3],
]);
const obj = fromEntries(map);
constole.log(obj); // { a: 1, b: 2, c: 3 }

const searchParams = new URLSearchParams('foo=bar&baz=qux');
const obj2 = fromEntries(searchParams);
console.log(obj2); // { foo: 'bar', 'baz': 'qux' }

目前 fromentries 在 NPM 的周平均下载量达到了 3,548K，超过了 350W。

es6-object-assign

ECMAScript 2015 (ES2015/ES6) Object.assign() 用于 ECMAScript 5 环境的 polyfill 和 ponyfill。

该包还可以作为 UMD 模块（与 AMD、CommonJS 兼容并公开全局变量 ObjectAssign）在 dist/object-assign.js 和 dist/object-assign.min.js（压缩后 833 字节）中使用。

具有自动 polyfilling 的版本是
dist/object-assign-auto.js 和
dist/object-assign-auto.min.js。

// Polyfill, modifying the global Object
require('es6-object-assign').polyfill();
var obj = Object.assign({}, { foo: 'bar' });

// Same version with automatic polyfilling
require('es6-object-assign/auto');
var obj = Object.assign({}, { foo: 'bar' });

// Or ponyfill, using a reference to the function without modifying globals
var assign = require('es6-object-assign').assign;
var obj = assign({}, { foo: 'bar' });

目前 es6-object-assign 在 NPM 的周平均下载量达到了 2,394K，超过了 230W。

fetch-ponyfill

WHATWG fetch 的 ponyfill。该模块将 github/fetch polyfill 包装在 CommonJS 模块中以实现浏览器化，并避免向 window 附加任何方法。

在 Node 中使用时，能力由 node-fetch 提供。

import fetchPonyfill from 'fetch-ponyfill';
const { fetch, Request, Response, Headers } = fetchPonyfill(options);

目前 fetch-ponyfill 在 NPM 的周平均下载量达到了 290K，超过了 29W。

本文总结

本文主要和大家介绍周均下载百万+的TOP 12前端 Ponyfill 。因为篇幅有限，文章并没有就每一个Ponyfill过多展开，如果有兴趣，可以直接在我主页继续阅读，但是文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://www.npmjs.com/package/es6-symbol

https://www.npmjs.com/package/object-assign

https://www.npmjs.com/package/path-parse

https://www.npmjs.com/package/es6-weak-map

https://www.npmjs.com/package/array-find

https://www.npmjs.com/package/es6-map

https://www.npmjs.com/package/array-find-index

https://www.npmjs.com/package/@whatwg-node/fetch

https://www.npmjs.com/package/css-vars-ponyfill

https://www.npmjs.com/package/path-dirname

https://www.npmjs.com/package/es6-object-assign

https://www.npmjs.com/package/fetch-ponyfill

上一篇：不管你信不信!这3种查找方式，能让你“秒”懂VLOOKUP函数
下一篇：从简到繁，一文说清vlookup函数的常见用法

网站首页 > 知识剖析 正文