在前端工程化开发中，babel 是常用的 JavaScript 编译器，用于将 ES6/ES7 语法转换为旧版浏览器可以识别的语法。而 babelrc 则是 babel 的配置文件，用于配置插件和预设等。
本篇文章将详细介绍 npm 包 babelrc 的使用教程，包括安装、配置、插件和预设等，以及示例代码。
安装
安装 babelrc 可以通过 npm 进行安装：
npm install --save-dev babelrc
配置
babelrc 的配置文件为 .babelrc，可以放置在项目的根目录下。其中，常用的配置项有以下几个：
presets
presets 是一系列插件的预设，用于将多个插件组合成为一个配置项。常见的预设有 env、react、es2015 等，可以根据项目的实际需求进行选择。
{
"presets": ["env", "react"]
}plugins
plugins 用于单独配置某个插件，以覆盖 presets 中的默认设置。例如，要使用 transform-es2015-modules-amd，可以这样配置：
{
"plugins": ["transform-es2015-modules-amd"]
}env
env 是用于不同环境配置的对象，例如可以区分开发环境和生产环境，设置不同的 presets 和 plugins。
-- -------------------- ---- -------
-
------ -
-------------- -
---------- ------- --------
--
------------- -
---------- --------
---------- ----------------------------
-
-
-插件和预设
babel 的插件和预设是其灵活性的体现，可以根据项目的需求进行自由组合。常用的插件有以下几个：
@babel/plugin-transform-arrow-functions
将箭头函数转换为普通函数。
@babel/plugin-proposal-class-properties
支持类属性的语法。
@babel/plugin-syntax-dynamic-import
支持动态 import() 引入语法。
@babel/plugin-transform-runtime
可以理解为 babel 的 polyfill，在代码中添加将 ES6+ 编译为 ES5 的运行时代码。
而常用的预设有：
@babel/preset-env
用于根据环境自动配置需要编译的语法特性，包括 ES6、ES7、ES8 等，使用时可以根据需要指定 targets（目标环境） 和 modules（模块化方案） 等选项。
@babel/preset-react
用于支持 React 的 JSX 语法。
@babel/preset-typescript
用于支持 TypeScript 语法。
示例代码
以下是一个简单的 .babelrc 配置文件示例，可用于将项目中的 ES6+ 语法转换成 ES5 语法。
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
--------- -----
----- ----
-
--
--
---------- -
------------------------------------------
------------------------------------------
--------------------------------------
---------------------------------
-
-以上是 npm 包 babelrc 的详细使用教程，希望能给前端开发者提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc214b5cbfe1ea061201d