babel核心知识点
Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 代码，以便在旧版本的浏览器或环境中运行。以下是 Babel 的核心知识点：
1. 基本概念
- 编译器：Babel 本质上是一个编译器，它遵循编译器的一般流程，即解析（Parsing）、转换（Transformation）和生成（Code Generation）。
- 解析：将源代码转换为抽象语法树（AST）。
- 转换：对 AST 进行修改，例如将新的语法特性转换为旧版本支持的语法。
- 生成：根据修改后的 AST 生成新的代码。
- 插件（Plugins）：Babel 的功能通过插件来实现。插件是对 AST 进行转换的函数，每个插件负责处理特定的语法转换。例如，
@babel/plugin-transform-arrow-functions插件可以将箭头函数转换为普通函数。 - 预设（Presets）：预设是一组插件的集合，用于方便地管理和配置多个插件。例如，
@babel/preset-env是一个常用的预设，它根据目标环境自动确定需要使用的插件。
2. 配置文件
Babel 可以通过配置文件来指定使用的插件和预设。常见的配置文件有 .babelrc、babel.config.js 等。
.babelrc 示例
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-arrow-functions"]
}
babel.config.js 示例
module.exports = {presets: [["@babel/preset-env",{targets: {browsers: ["last 2 versions", "ie >= 11"]}}]],plugins: ["@babel/plugin-transform-arrow-functions"]
};
3. 常用预设
@babel/preset-env：根据目标环境自动确定需要使用的插件。可以通过targets选项指定目标浏览器或环境，例如{ "browsers": ["last 2 versions", "ie >= 11"] }表示支持每个浏览器的最后两个版本以及 IE 11 及以上版本。@babel/preset-react：用于处理 React 代码，包括 JSX 和 React 特定的语法。@babel/preset-typescript：用于处理 TypeScript 代码，将 TypeScript 代码转换为 JavaScript 代码。
4. 常用插件
@babel/plugin-transform-arrow-functions：将箭头函数转换为普通函数。
// 转换前
const add = (a, b) => a + b;// 转换后
var add = function add(a, b) {return a + b;
};
@babel/plugin-transform-classes：将 ES6 类转换为 ES5 构造函数和原型方法。
// 转换前
class Person {constructor(name) {this.name = name;}sayHello() {console.log(`Hello, ${this.name}`);}
}// 转换后
var Person = function () {function Person(name) {this.name = name;}Person.prototype.sayHello = function () {console.log('Hello, ' + this.name);};return Person;
}();
@babel/plugin-proposal-object-rest-spread：支持对象的扩展运算符和剩余参数。
// 转换前
const { a, ...rest } = { a: 1, b: 2, c: 3 };
const newObj = { ...rest, d: 4 };// 转换后
var _objectWithoutProperties = function (obj, keys) {var target = {};for (var i in obj) {if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];}return target;
};
var a = _ref.a,rest = _objectWithoutProperties(_ref, ['a']);
var newObj = Object.assign({}, rest, { d: 4 });
5. 插件开发
Babel 插件本质上是一个函数，它接收一个 babel 对象作为参数，并返回一个包含 visitor 属性的对象。visitor 是一个对象，包含了对 AST 节点进行处理的方法。
以下是一个简单的 Babel 插件示例，用于将所有的字符串字面量转换为大写：
module.exports = function (babel) {const { types: t } = babel;return {visitor: {StringLiteral(path) {const newNode = t.stringLiteral(path.node.value.toUpperCase());path.replaceWith(newNode);}}};
};
6. 与构建工具集成
Babel 通常与构建工具（如 Webpack、Rollup 等）集成，以便在构建过程中自动进行代码转换。
Webpack 集成示例
const path = require('path');module.exports = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]}
};
通过以上核心知识点，你可以了解 Babel 的基本原理、配置方法、常用插件和预设，以及如何开发自己的插件和与构建工具集成。
作用介绍
Babel有了解过吗，请说说 Babe1的高的使用和原理?
了解过
bebeL用来作什么的?
，将高版本(ESHA） 3S 转为低版本16
将 Typescript 转为j5
-降级处理。polyfiLl，vita esbuild.roLlup
taro早期，就是使用 bobet将nerV、Peact，遇法转为小程序
<di→diew
自己想要的语法支持，options chatn2.
基础使用
babel、webpack，都有两种使用途径：1.命令行、2.node 环境下的api
@babel/cLi
插件化机制实现、预设
@babel./plugin-transfore-arrow-functiona
@babel/plugin-transfora-instanceof
但是，为了给开发者足够的便捷，b8581 又在插件的基锁上封装了一层，预设
-@babel/preset-env