Babel

概念

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,从而优化项目的构建体积。

相关推荐
mubeibeinv1 分钟前
列表代码思路
前端
过期的H2O22 分钟前
【H2O2|全栈】JS进阶知识(十)ES6(6)
开发语言·前端·javascript·ecmascript·es6
White graces9 分钟前
Spring MVC练习(前后端分离开发实例)
java·开发语言·前端·后端·spring·java-ee·mvc
2401_8827264812 分钟前
web组态可视化编辑器
前端·物联网·前端框架·编辑器·web·iot
前端郭德纲17 分钟前
React Native 性能调试指南
javascript·react native·react.js
努力学习的木子18 分钟前
跨域问题?同源策略大全
前端
○陈22 分钟前
vue2面试题10|[2024-11-24]
前端·javascript·vue.js
米奇妙妙wuu23 分钟前
react实现模拟chatGPT问答页
前端·react.js·chatgpt·前端框架
在荒野的梦想26 分钟前
Vue-TreeSelect组件最下级隐藏No sub-options
前端·javascript·vue.js
田本初1 小时前
浏览器缓存与协商缓存
前端·javascript·缓存