本文主要介绍babel的配置文件。babelrc详细介绍。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
介绍
Es6浏览器目前还不完全支持，但使用es6是大势所趋，于是babel应运而生，将es6代码转换成浏览器可以识别的代码。
Babel提供了专门的命令行工具来方便转码，大家可以自己了解一下。
什么是Babel
官方解释，是下一代JavaScript语法的编译器。
既然是下一代JavaScript的标准，浏览器就会因为版本不同而出现兼容性问题，Javascript的新方法无法使用。但目前我们在项目开发中一直倡导使用最新的语法糖，不仅可以减少代码量，还有Async异步、await等新特性解决回调编写机制，降低代码维护成本。
巴别塔就是因为这个诞生的。它可以让你放心地使用JavaScript的大多数新标准方法，然后将它们编译成与大多数主流浏览器兼容的代码。在项目脚手架中。一般使用babelrc文件，配置一些参数配合webpack进行打包压缩。我也是从网上知道的，写法不一样，参数相差很大。所以我重新整理一个文档，详细介绍每个配置项的含义，以便清楚地了解是否使用。
以下配置主要是为webpack3编写的。
Babel转译器
在。主要配置babelrc配置文件，预置和插件，所以不同的翻译器服务不同的配置项，大致可以分为以下三项：
1.语法转义符。它编译javascript的最新语法糖，不负责翻译javascript的新API和全局对象。比如let/const可以编译，但是includes/Object.assign不能编译。常用的翻译器有babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在实际开发中，我们只能选择babel-preset-env来替换其余的，但是需要和javascirpt的生产规范一起使用，这也是官方的推荐。
{
预设':['环境'，{
'模块':假
}],
第二阶段
}
2.补丁逃逸器。主要负责翻译javascript的新API和全局对象，比如babel-plugin-transform-runtime，可以编译Object.assign，同时可以引入babel-polyfill，进一步保证浏览器中includes的兼容性。Object.assign将被编译成以下代码：
复制代码如下：
_ _ web pack _ IMPORTED _ MODULE _ 1 _ babel _ runtime _ core _ js _ object _ assign _ _ _ default()
3.jsx和流插件。这种翻译器用于翻译JSX语法和删除类型声明。使用Rect的时候会用到。译者名字叫巴别塔-预设-反应。
创建预设(presets)
主要是通过npm安装babel-preset-xx插件，比如通过NPM安装Babel-preset-stage-2 Babel-preset-env-save-dev，会有如下对应配置。
{
预设':[
['env '，选项]，
第二阶段
]
}
stage-2配置
Babel主要提供以下逃逸包，对应配置文件的配置项在括号内。
巴别塔-预设-阶段-0(阶段-0)
巴别塔-预设-第一阶段(第一阶段)
巴别塔-预设-第二阶段(第二阶段)
巴别塔-预设-第三阶段(第三阶段)
不同阶段的译者是一种包容的关系。除了preset-stage-1的所有功能之外，preset-stage-0的翻译器还添加了transform-do-expressions插件和transform-function-bind插件。同样的，preset-stage-1的翻译器除了preset-stage-2的所有功能之外，还增加了一些附加功能。
options配置介绍
官方推荐Babel-preset-env来代替安装一些插件包(es2015-arrow-functions，es2015-block-scoped-functions等。)，还有如下几种配置信息。介绍几个常用的。
更多配置请参考https://babeljs.io/docs/plugins/preset-env/,官网
{
目标':
' chrome': 52，
浏览器':['最近两个版本'，' safari 7']，
节点“:”6.10
}
'模块':假
}
/* harmony import */var _ _ web pack _ IMPORTED _ MODULE _ 0 _ babel _ runtime _ helpers _ classCallCheck _ _ _ default=_ _ web pack _ require _ _。n(_ _ web pack _ IMPORTED _ MODULE _ 0 _ babel _ runtime _ helpers _ classCallCheck _ _)；
var Canvas=功能画布(高度、宽度){
_ _ web pack _ IMPORTED _ MODULE _ 0 _ babel _ runtime _ helpers _ classCallCheck _ _ _ default()(this，Canvas)；
this.height=高度；
this.width=宽度；
};
var Canvas2=函数Canvas2(高度，宽度){
_ _ web pack _ IMPORTED _ MODULE _ 0 _ babel _ runtime _ helpers _ classCallCheck _ _ _ default()(this，canvas 2)；
this.height=高度；
this.width=宽度；
};
它还具有与上面的生成器函数相同的编译效果。目前项目中使用的函数比较少，一般都是用promise代替，async await也没有测试过这个函数。
官方会编promise，但实际测试结果没有效果。
webpack打包最终测试后，引入配置项transform-runtime后，打包门户的js文件大小会略有增加，并没有官方说的那么小。
未配置的最终包装效果：
配置后的最终包装效果：
虽然文件大小会增加，但会解决一些兼容性问题。同时，从上面给出的测试代码例子来看，使用transform-runtime后，可以减少内部全局函数的定义。从结构上看，尊重webpack的模块化思想，所以推荐使用这个插件。
插件（plugins）
这个插件主要解决动态引入模块的问题。
函数nDate() {
导入(“时刻”)。然后(函数(时刻){
console.log(moment()。format())；
}).catch(函数(错误){
console.log('加载时刻失败'，err)；
});
}
nDate()；
如果在。babelrc配置项，插件可以不用，也支持引入动态模块。
否则，将会报告以下错误：
模块失败：语法错误：“导入”和“导出”只能出现在顶级，或者(导入和导出只能在最外层，即不能在函数或块中使用)
模块生成失败：语法错误：意外标记，应为{
transform-runtime
syntax-dynamic-import
主要功能是指定那些代码不编译。
{
忽略“:[”。/module/a.js']
}
let，Object.assign，class class的定义不编译，编译效果如下：
_ _ web pack _ require _ _(' ez/6 ')；
const AAA=1；
函数fna () {
设dd=33333
设cc=Object.assign({key:2})
让xx=string . prototype . repeat . call(' b '，3)
if(' foobar ' . string . prototype . includes(' foo '){
设vv=1
}
返回dd
}
函数fna2 () {
return FNA()AAA _ _ web pack _ IMPORTED _ MODULE _ 0 _ _ b _ _[' a '/* default */]
}
类别画布{
构造者(高度、宽度){
this.height=高度；
this.width=宽度；
}
}
Canvas2级
构造者(高度、宽度){
this.height=高度；
this.width=宽度；
}
}
其他配置项
主要设置是编译后是否压缩，为布尔型。如果用babel-cli打包编译文件，这个配置项可以发挥作用。但是目前大部分还是依赖第三方打包工具，比如webpack。因此，该配置参数一般不需要设置。webpack插件中的UglifyJsPlugin执行压缩工作。
ignore
在生成的文件中，没有生成注释，它是布尔类型的。webpack插件中的UglifyJsPlugin也集成了这个功能。
minified
基本配置如下：
{
环境':{
//test是预先设置的环境变量。如果没有设置BABEL_ENV，则使用NODE_ENV。如果没有设置，则默认为开发。
测试':{
预设':['环境'，'阶段-2']，
//inst bul是一个用来测试转码后代码的工具。
插件':['伊斯坦布尔']
}
}
}
comments
Babel默认只转换新的JavaScript语法，不转换新的API，比如迭代器、生成器、Set、Maps、Promise等全局对象。并且在全局对象上定义的一些方法(如Object.assign)不会被转码。详见babel-plugin-transform-runtime模块的definitions.js文件。
这主要涉及到babel编译后仍然会有浏览器兼容问题。一般transform-runtime和babel-polyfill一起使用，后者只需要在项目入口文件require中引入即可。
当然，在使用Object.assign函数之类的函数时，可以用lodash库替换，promise可以用Q.js替换等等。所以没有必要引入以上插件进行依赖，可以根据具体项目来安排。
env
的。babelrc配置文件主要由预置和插件组成，与webpack配合使用。下面分享一下我们在项目中常见的配置。以上都是通过学习总结出来的。我希望指出任何错误。
vue项目开发中使用的配置如下：
{
预设':[
['env '，{
'模块':假
}],
第二阶段
],
//下面的意思是在生成的文件中，不生成注释。
'注释':假，
插件':['转换-运行时'，'语法-动态-导入']，
环境':{
//test是预先设置的环境变量。如果没有设置BABEL_ENV，则使用NODE_ENV。如果没有设置，则默认为开发。
测试':{
预设':['环境'，'阶段-2']，
//inst bul是一个用来测试转码后代码的工具。
插件':['伊斯坦布尔']
}
}
}
react项目开发中使用的配置如下：
{
预设':[
['env '，{ 'modules': false }]，
第二阶段，
“做出反应”
],
插件':['转换运行时']，
'注释':假，
环境':{
测试':{
预设':['环境'，'阶段-2']，
插件':['伊斯坦布尔']
}
}
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。