• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

zloirock/core-js: Standard Library

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

zloirock/core-js

开源软件地址(OpenSource Url):

https://github.com/zloirock/core-js

开源编程语言(OpenSource Language):

JavaScript 99.9%

开源软件介绍(OpenSource Introduction):

logo

Open Collective version core-js downloads core-js-pure downloads jsDelivr tests eslint

Modular standard library for JavaScript. Includes polyfills for ECMAScript up to 2023: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript proposals, some cross-platform WHATWG / W3C features and proposals like URL. You can load only required features or use it without global namespace pollution.

If you are looking for documentation for obsolete core-js@2, please, check this branch.

As advertising: the author is looking for a good job -)

core-js@3, babel and a look into the future

Raising funds

core-js isn't backed by a company, so the future of this project depends on you. Become a sponsor or a backer if you are interested in core-js: Open Collective, Patreon, Bitcoin ( bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz ).




Example of usage:

import 'core-js/actual'; // <- at the top of your entry point

Array.from(new Set([1, 2, 3, 2, 1]));          // => [1, 2, 3]
[1, 2, 3, 4, 5].group(it => it % 2);           // => { 1: [1, 3, 5], 0: [2, 4] }
Promise.resolve(42).then(x => console.log(x)); // => 42
structuredClone(new Set([1, 2, 3]));           // => new Set([1, 2, 3])
queueMicrotask(() => console.log('called as microtask'));

You can load only required features:

import 'core-js/actual/array/from';       // <- at the top of your entry point
import 'core-js/actual/array/group';      // <- at the top of your entry point
import 'core-js/actual/set';              // <- at the top of your entry point
import 'core-js/actual/promise';          // <- at the top of your entry point
import 'core-js/actual/structured-clone'; // <- at the top of your entry point
import 'core-js/actual/queue-microtask';  // <- at the top of your entry point

Array.from(new Set([1, 2, 3, 2, 1]));          // => [1, 2, 3]
[1, 2, 3, 4, 5].group(it => it % 2);           // => { 1: [1, 3, 5], 0: [2, 4] }
Promise.resolve(42).then(x => console.log(x)); // => 42
structuredClone(new Set([1, 2, 3]));           // => new Set([1, 2, 3])
queueMicrotask(() => console.log('called as microtask'));

Or use it without global namespace pollution:

import from from 'core-js-pure/actual/array/from';
import group from 'core-js-pure/actual/array/group';
import Set from 'core-js-pure/actual/set';
import Promise from 'core-js-pure/actual/promise';
import structuredClone from 'core-js-pure/actual/structured-clone';
import queueMicrotask from 'core-js-pure/actual/queue-microtask';

from(new Set([1, 2, 3, 2, 1]));                // => [1, 2, 3]
group([1, 2, 3, 4, 5], it => it % 2);          // => { 1: [1, 3, 5], 0: [2, 4] }
Promise.resolve(42).then(x => console.log(x)); // => 42
structuredClone(new Set([1, 2, 3]));           // => new Set([1, 2, 3])
queueMicrotask(() => console.log('called as microtask'));

Index

Usage

Installation:

// global version
npm install --save [email protected]
// version without global namespace pollution
npm install --save [email protected]
// bundled global version
npm install --save [email protected]

Or you can use core-js from CDN.

postinstall message

The core-js project needs your help, so the package shows a message about it after installation. If it causes problems for you, you can disable it:

ADBLOCK=true npm install
// or
DISABLE_OPENCOLLECTIVE=true npm install
// or
npm install --loglevel silent

CommonJS API

You can import only-required-for-you polyfills, like in examples at the top of README.md. Available CommonJS entry points for all polyfilled methods / constructors and namespaces. Just some examples:

// polyfill all `core-js` features, including early-stage proposals:
import "core-js";
// or:
import "core-js/full";
// polyfill all actual features - stable ES, web standards and stage 3 ES proposals:
import "core-js/actual";
// polyfill only stable features - ES and web standards:
import "core-js/stable";
// polyfill only stable ES features:
import "core-js/es";

// if you want to polyfill `Set`:
// all `Set`-related features, with early-stage ES proposals:
import "core-js/full/set";
// stable required for `Set` ES features, features from web standards and stage 3 ES proposals:
import "core-js/actual/set";
// stable required for `Set` ES features and features from web standards
// (DOM collections iterator in this case):
import "core-js/stable/set";
// only stable ES features required for `Set`:
import "core-js/es/set";
// the same without global namespace pollution:
import Set from "core-js-pure/full/set";
import Set from "core-js-pure/actual/set";
import Set from "core-js-pure/stable/set";
import Set from "core-js-pure/es/set";

// if you want to polyfill just required methods:
import "core-js/full/set/intersection";
import "core-js/actual/array/find-last";
import "core-js/stable/queue-microtask";
import "core-js/es/array/from";

// polyfill iterator helpers proposal:
import "core-js/proposals/iterator-helpers";
// polyfill all stage 2+ proposals:
import "core-js/stage/2";

Note: The usage of the /actual/ namespace is recommended since it includes all actual JavaScript features and does not include unstable early-stage proposals that are available mainly for experiments.

Caveats when using CommonJS API:
  • modules path is an internal API, does not inject all required dependencies and can be changed in minor or patch releases. Use it only for a custom build and/or if you know what are you doing.
  • If you use core-js with the extension of native objects, recommended load all core-js modules at the top of the entry point of your application, otherwise, you can have conflicts.
    • For example, Google Maps use their own Symbol.iterator, conflicting with Array.from, URLSearchParams and/or something else from core-js, see related issues.
    • Such conflicts also resolvable by discovering and manual adding each conflicting entry from core-js.
  • core-js is extremely modular and uses a lot of very tiny modules, because of that for usage in browsers bundle up core-js instead of usage loader for each file, otherwise, you will have hundreds of requests.

CommonJS and prototype methods without global namespace pollution

In the pure version, we can't pollute prototypes of native constructors. Because of that, prototype methods transformed into static methods like in examples above. But with transpilers, we can use one more trick - bind operator and virtual methods. Special for that, available /virtual/ entry points. Example:

import fill from 'core-js-pure/actual/array/virtual/fill';
import findIndex from 'core-js-pure/actual/array/virtual/find-index';

Array(10)::fill(0).map((a, b) => b * b)::findIndex(it => it && !(it % 8)); // => 4

Warning! The bind operator is an early-stage ECMAScript proposal and usage of this syntax can be dangerous.

Babel

core-js is integrated with babel and is the base for polyfilling-related babel features:

@babel/polyfill

@babel/polyfill IS just the import of stable core-js features and regenerator-runtime for generators and async functions, so if you load @babel/polyfill - you load the global version of core-js without ES proposals.

Now it's deprecated in favour of separate inclusion of required parts of core-js and regenerator-runtime and, for preventing breaking changes, left on core-js@2.

As a full equal of @babel/polyfill, you can use this:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

@babel/preset-env

@babel/preset-env has useBuiltIns option, which optimizes working with global version of core-js. With useBuiltIns option, you should also set corejs option to used version of core-js, like corejs: '3.24'.

Warning! Recommended to specify used minor core-js version, like corejs: '3.24', instead of corejs: 3, since with corejs: 3 will not be injected modules which were added in minor core-js releases.

  • useBuiltIns: 'entry' replaces imports of core-js to import only required for a target environment modules. So, for example,
import 'core-js/stable';

with chrome 71 target will be replaced just to:

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";

It works for all entry points of global version of core-js and their combinations, for example for

import 'core-js/es';
import 'core-js/proposals/set-methods';
import 'core-js/full/set/map';

with chrome 71 target you will have as a result:

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/esnext.set.difference";
import "core-js/modules/esnext.set.intersection";
import "core-js/modules/esnext.set.is-disjoint-from";
import "core-js/modules/esnext.set.is-subset-of";
import "core-js/modules/esnext.set.is-superset-of";
import "core-js/modules/esnext.set.map";
import "core-js/modules/esnext.set.symmetric-difference";
import "core-js/modules/esnext.set.union";
  • useBuiltIns: 'usage' adds to the top of each file import of polyfills for features used in this file and not supported by target environments, so for:
// first file:
var set = new Set([1, 2, 3]);

// second file:
var array = Array.of(1, 2, 3);

if target contains an old environment like IE 11 we will have something like:

// first file:
import 'core-js/modules/es.array.iterator';
import 'core-js/modules/es.object.to-string';
import 'core-js/modules/es.set';
var set = new Set([1, 2, 3]);

// second file:
import 'core-js/modules/es.array.of';
var array = Array.of(1, 2, 3);

By default, @babel/preset-env with useBuiltIns: 'usage' option only polyfills stable features, but you can enable polyfilling of proposals by proposals option, as corejs: { version: '3.24', proposals: true }.

Warning! In the case of useBuiltIns: 'usage', you should not add core-js imports by yourself, they will be added automatically.

@babel/runtime

@babel/runtime with corejs: 3 option simplifies work with core-js-pure. It automatically replaces usage of modern features from JS standard library to imports from the version of core-js without global namespace pollution, so instead of:

import from from 'core-js-pure/stable/array/from';
import flat from 'core-js-pure/stable/array/flat';
import Set from 'core-js-pure/stable/set';
import Promise 
                      

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap