当前位置: 首页 > Web前端 > JavaScript

学习Babel,从这里开始!

时间:2023-03-27 02:07:31 JavaScript

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,从这里开始!