core-js是javascript运行时polyfill库,需按需引入stable/或features/下精确路径(如import 'core-js/stable/promise'),禁用全量引入;cdn须带版本与子路径,script须defer且前置;node环境require需带.js后缀并注意大小写。

core-js 不是 HTML 库,它是一个 JavaScript 运行时 Polyfill 库,必须通过 JS 模块导入或脚本加载才能生效。直接在 HTML 中用 <script src="...core-js..."></script> 引入时,若未指定具体入口路径,极易引入冗余代码或触发全局污染,反而增加体积、引发冲突。
下面说清楚「怎么按需引入」「为什么不能乱写路径」「哪些地方最容易出错」。
按需引入必须指定 features/ 或 stable/ 下的精确路径
core-js 的模块结构非常严格:所有按需能力都组织在 features/(含提案阶段 API)和 stable/(仅标准已定 API)两个顶层目录下。不写对路径,就等于没引入。
错误写法:
import 'core-js'或<script src="node_modules/core-js/index.js"></script>
→ 这会默认加载全部 polyfill(包括你根本不用的 Web API),体积暴涨,且强制挂载到全局。-
正确写法(ESM 场景):
import 'core-js/stable/array/from';
import 'core-js/features/promise/try';
import 'core-js/stable/set';
-
若用 CDN(如 jsDelivr),路径也必须带版本和子路径:
<script src="https://cdn.jsdelivr.net/npm/core-js@3.37/stable/array/from.js"></script>
区分 stable/ 和 features/:别把提案当稳定特性用
stable/ 是 ECMA-262 已发布标准(如 ES2015–ES2024),浏览器兼容性数据明确;features/ 包含 stage-3 及以上提案(如 Promise.try、Array.groupBy),部分实现可能被标准废弃或行为变更。
- 如果你只支持现代浏览器(Chrome 90+、Safari 15+、Firefox 89+),优先用
stable/路径,更可靠; - 若项目明确依赖某个提案 API(如用
Temporal.Now.plainDateISO()),才选features/temporal,但要留意其未来兼容风险; - 不要混用:比如
import 'core-js/features/array/from'和import 'core-js/stable/array/from'功能重复,且后者可能覆盖前者导致不可预期行为。
CDN 加载时注意 script 标签顺序与执行时机
Polyfill 必须在业务代码执行前完成注入,否则仍会报XXX is not a function。
- 所有
<script></script>必须放在顶部,或加defer属性(不能用async); - 多个 polyfill 脚本之间有隐式依赖(如
Promise是fetch的基础),顺序不能颠倒:<script src="https://cdn.jsdelivr.net/npm/core-js@3.37/stable/promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@3.37/stable/fetch.js"></script>
- 如果业务代码打包为单文件(如 Webpack 输出的
bundle.js),polyfill 脚本必须在它之前加载,否则模块内调用的新 API 无法被补全。
Node.js 环境下 require() 的路径写法差异
CommonJS 中不能省略扩展名,且路径大小写敏感:- 正确:
require('core-js/stable/array/from'); - 错误:
require('core-js/stable/array/from')(缺.js后缀,在某些 Node 版本下失败); - 更错误:
require('core-js/stable/Array/From')(大小写错,Linux 系统直接报MODULE_NOT_FOUND); - 若使用
core-js-pure(无全局污染版),路径前缀要换成core-js-pure/,例如:const { from } = require('core-js-pure/stable/array');
真正容易被忽略的是:按需引入不是“选几个函数加进去”那么简单——路径层级、环境模块系统、是否污染全局、是否与 Babel 插件共存,每个环节断掉都会让 polyfill 形同虚设。尤其在微前端或 legacy 页面嵌入新模块时,全局注入和纯函数式引入必须严格隔离,否则一个 Array.from 补丁就能让老代码意外改写原生行为。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











