概念
Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程,能够将源代码转换为目标代码。
- 语法转换:将新版本的 JavaScript 语法转换为旧版本的语法
- Polyfill:通过引入额外的代码,使新功能在旧浏览器中可用
- JSX: 将JSX语法转换成普通的JavaScript语法
- 插件: 为Babel提供自定义功能
官网 babeljs.io/
代码对应的 AST 手相语法树: astexplorer.net/
Babel所有的包 babeljs.io/docs/babel-...
- @babel/parser:将代码通过一些配置转为 AST 抽象语法树。
- @babel/traverse: 转换内部的一些操作。
- @babel/generator:生成最终的结果。
- @babel/core:整合了整合过程(核心包)。
- @babel/preset-env:es6 -> se5 的核心包。
我们可以通过以下库将 js 新语法转为旧语法:
shell
npm install --save-dev @babel/core @babel/cli @babel/preset-env
支持新特性(原理是判断对象的原型上是否存在某个方法):
shell
npm i core-js -D
支持 tsx / jsx :
shell
npm install @babel/preset-react -D
core-js
core-js 是一个模块化的 JavaScript 标准库,为 ECMAScript 提供 polyfill(补丁)。
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为,尤其是提供对较新 ECMAScript 特性(如 Promise、Symbol、Object.assign 等)的支持。
1)Polyfill 的概念:
Polyfill 是一段代码,用来实现浏览器中原生未支持的功能。随着 JavaScript 标准不断更新,新的特性和功能被添加,但并不是所有的浏览器都能及时支持这些新特性。
这时候 polyfill 就显得尤为重要,它模拟了这些新特性,使得老旧浏览器也能够"理解"并执行这些新的语法和功能。
2)core-js 的模块化设计:
core-js 是模块化的,这意味着开发者可以按需引入自己需要的 polyfill,而不是全部引入,这不仅能减少代码体积,还有助于提高性能。
例如,如果你只需要使用 Promise,那么可以只引入 core-js 的 Promise 模块:
javascript
import 'core-js/modules/es.promise';
3)与 Babel 的集成:
core-js 通常与 Babel 一起使用。当你使用 Babel 编译代码时,它能够自动根据你的目标环境(如浏览器版本)添加所需的 polyfill。
例如,Babel 插件 @babel/preset-env 可以与 core-js 配合使用,通过设置 useBuiltIns 选项指定 polyfill 的使用方式:
json
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3 // corejs的版本
}]
]
}
这段配置会根据你的代码,仅引入那些你实际用到的 polyfill,从而优化项目的构建体积。