babel文档,安装babel,babel之配置文件.babelrc入门详解

本文主要介绍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替换等等。所以没有必要引入以上插件进行依赖，可以根据具体项目来安排。