详解babel的配置文件.babelrc

最近在搞项目迁移，一切都是从零开始。有的浏览器还不能识别最新的es6语法，在进行项目框架搭建的时候需要将es6最新的语法转化为浏览器能识别的语法，这个时候就用到了babel。

一、什么是babel? 它是干什么用的？

ES6是2015年发布的下一代javascript语言标准，到现在的ES2019，它引入了新的语法和API，使我们编写js代码更加得心应手，比如let、class、Symbol、 promise等，但是由于这些js新特性只能被最新版本的浏览器支持，一些低版本浏览器并不支持，那么想要在低版本浏览器上运行就需要一个转换工具，把es6代码转换成浏览器能识别的代码，babel就是这样的一个工具。可以理解为 babel是javascript语法的编译器。

二、 Babel编译器

在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。 babel6.X版本之后，所有的插件都是可插拔的，也就是说只安装babel依然无法正常的工作，我们需要配置对应的.babelrc文件才能起作用。在.babelrc配置文件中，主要是对预设(presets) 和插件(plugins) 进行配置。

.babelrc配置文件一般如下：

{"presets": [["env",{"modules": false}],"stage-2"],"plugins": [["transform-runtime",{"polyfill": false}]]
}

下面我们来具体分析一下.babelrc里面的内容。

1、presets(预设)
presets属性告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合。
1.1、理解 babel-preset-env
比如：
babel-preset-es2015: 可以将es6的代码编译成es5.
babel-preset-es2016: 可以将es7的代码编译为es6.
babel-preset-es2017: 可以将es8的代码编译为es7.
babel-preset-latest: 支持现有所有ECMAScript版本的新特性。
举个列子，比如我们需要转换es6语法，我们可以在 .babelrc的plugins中按需引入一下插件，比如：
check-es2015-constants、es2015-arrow-functions、es2015-block-scoped-functions等等几十个不同作用的plugin：
那么配置项可能是如下方式：

// .babelrc
{"plugins": ["check-es2015-constants","es2015-arrow-functions","es2015-block-scoped-functions",// ...]
}

但是Babel团队为了方便，将同属ES2015的几十个Transform Plugins集合到babel-preset-es2015一个Preset中，这样我们只需要在.babelrc的presets加入es2015一个配置就可以完成全部ES2015语法的支持了，如下：

// .babelrc
{"presets": ["es2015"]
}

但是我们随着时间的推移，将来可能会有跟多的版本插件,比如 bebel-preset-es2018,… 等等。
因此 babel-preset-env 出现了，它的功能类似于 babel-preset-latest，它会根据目标环境选择不支持的新特性来转译。

首先需要在项目中安装，如下命令：

npm install babel-preset-env --save-dev

注意这里用的是–save-dev

详解babel的配置文件.babelrc相关推荐

Debian操作系统的源配置信息详解--Source.list配置文件详解
转载来源:https://wiki.debian.org/SourcesList#Repository_URL Debian操作系统的源配置信息详解--Source.list配置文件详解 Debian ...
ibatis mysql 配置文件详解_MyBatis Generator 配置文件详解
MyBatis Generator (MBG) 是由一个XML配置文件驱动的.这个配置文件中会声明以下内容: 如何连接数据库要生成什么对象,以及如何生成它们哪些表需要应用于对象生成. 根元素 ge ...
详解mybatis映射配置文件
一 mybatis 映射文件结构 mybatis映射配置文件存在如下顶级元素,且这些元素按照如下顺序被定义. cache – 给定命名空间的缓存配置. cache-ref – 其他命名空间缓存配置的 ...
yum命令启用仓库_yum 命令详解-yum仓库配置文件详解
yum安装的优点 1.必须得有网络,通过网络获取软件. 2.管理rpm包 3.自动解决依耐 4.命令简单好用 5.生产最佳实践 yum命令详解 # linux安装软件的三种方式 1.rpm安装 2.源 ...
babel之配置文件.babelrc入门详解
介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解什么是Ba ...
详解Spring Boot配置文件之多环境配置
一. 多环境配置的好处: 1.不同环境配置可以配置不同的参数~ 2.便于部署,提高效率,减少出错~ 二. properties多环境配置 1. 配置激活选项 spring.profiles.activ ...
mybatis mysql 配置文件详解_Mybatis的配置文件参数详解
1.Myatis配置文件主要是mybatis-config.xml 我们来看一下这里的详细的配置和需要注意的地方: View Code 2.Mybatis配合文件节点详细解释下面我们看看关于参数的配 ...
【nginx详解】nginx配置文件详细解析以及模板
文章目录目录文章目录一.nginx 模板案例下载二.nginx介绍三.nginx功能四.nginx配置总结一.nginx 模板案例下载 nginx-1.19.10.rar(内含配置文件 ...
【配置详解】Quartz配置文件详解
我们通常是通过quartz.properties属性配置文件(默认情况下均使用该文件)结合StdSchedulerFactory 来使用Quartz的.StdSchedulerFactory 会加载属 ...

详解babel的配置文件.babelrc

详解babel的配置文件.babelrc相关推荐

最新文章

热门文章