1.Babel解决什么问题？1、浏览器无法运行使用ECMAScript2015+、JSX、TypeScript等语法编写的脚本代码。ECMAScript2015+：ECMAScript在2015年发布了新的JavaScript语法；JSX：React框架中使用的一种脚本语言；详情请看这里！TypeScript：JavaScript对数据类型、逻辑检查等的扩展语法；详情请看这里！2.解决方案Babel可以将这些代码转换成浏览器可以运行的JavaScript代码。ES2015、TypeScript、JSX等不仅可以提高开发效率，还可以解决一些原生JavaScript语法无法处理的编程问题。2.运行原理简介使用Babel进行代码转换，需要涉及三个模块：【运行程序】+【配置】+【插件/预设】。运行程序：主要是指@babel/core和@babel/cli；配置文件：转换中一些具体选项的设置；Plugins、Presets：确定哪些代码需要转换；3.一个用ES2015语法写的项目的简单案例，如何使用Babel将其转换成浏览器可以运行的代码？新建项目文件夹：learn-babel；创建一个新文件夹learn-babel/src并创建以下代码并将其复制到learn-babel/src/test.js文件中；[1,2,3].map(n=>n+1);新建文件夹learn-babel/lib放置转换后的代码；新建配置文件learn-babel/babel.config.json，复制以下配置信息{"presets":["@babel/preset-env"]}安装babelcdlearn-babelnpminstall--save-dev@babel/core@babel/cli@babel/preset-env转换代码（有下面两种方法）#方法1./node_modules/.bin/babelsrc--out-dirlib#方法2npxbabelsrc--out-dirlib在lib目录下可以看到结果。生成一个新文件test.js，其中将箭头函数的新语法转换为普通函数。“使用严格”;[1,2,3].map(function(n){returnn+1;});四、核心模块1、@babel/core包含了Babel的所有核心功能，同时也提供了API，可以直接在代码中调用进行转码。#安装npminstall--save-dev@babel/core#使用constbabel=require("@babel/core");babel.transformSync("code",optionsObject);2、@babel/cli是一个可执行程序，直接在终端调用代码转换即可；#安装npminstall--save-dev@babel/core@babel/cli#转换src目录下的ES2015语法代码输出到lib目录/node_modules/.bin/babelsrc--out-dirlib--presets=@babel/env#./node_modules/.bin/babel可以使用npx代替npxsrc--out-dirlib--presets=@babel/env五、PluginsPlugins和Presets告诉Babel应该转换哪些代码。一个Plugin实现一个代码转换功能，多个Plugins的组合称为Presets。使用plugin-transform-arrow-functions插件将ES2015+箭头函数语法转换为浏览器可执行代码。npminstall--save-dev@babel/plugin-transform-arrow-functions./node_modules/.bin/babelsrc--out-dirlib--plugins=@babel/plugin-transform-arrow-functionsplugins-官方文档六,Presets一个Plugin实现了代码转换的功能，多个Plugins组合起来称为Presets。官方提供了4个Presets，可以直接使用。1.preset-env函数：用于转换ES2015+的所有语法。npminstall--save-dev@babel/preset-env./node_modules/.bin/babelsrc--out-dirlib--presets=@babel/envbabel-preset-env-官方文档2，preset-react函数：对于React项目。React项目中如何使用Babel转译JSX代码？babel-preset-react-官方文档3.preset-typescript功能：用于转换TypeScript代码。babel-preset-typescript-官方文档4.preset-flow功能：用于转换流代码。babel-preset-flow-官方文档七、配置文件1、分类配置文件分为两类：基于项目的配置文件和基于文件的项目配置。基于项目的Babel7.x版本，Babel会默认使用目录下的babel.config.json作为配置文件，或者其他支持的后缀.js、.cjs、.mjs。下面是.json后缀的配置格式：{"presets":[...],"plugins":[...]}基于文件，有两种使用情况：文件名为.babelrc。json和其他可用的扩展名：.babelrc、.js、.cjs、.mjs。在package.json文件中配置babel如下：{"name":"my-package","version":"1.0.0","babel":{"presets":[...],"plugins":[...],}}.js后缀的描述JavaScript配置文件可以导出一个对象或函数，调用时会返回生成的配置。配置返回函数被赋予了一些特殊的权力，因为它们可以访问Babel本身公开的API。配置格式如下：module.exports=function(api){api.cache(true);常量预设=[...];const插件=[...];return{presets,plugins};}2.配置选项配置文件的选项分为两类：配置项的相关属性。options-官方文档配置了Plugin或Preset的相关属??性。需要找到对应的文档，看看有哪些属性可以设置。八、参考文档学习Babel，从这里开始！
