<强>介绍
es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以巴别塔应运而生,用来将es6代码转换成浏览器能够识别的代码
巴别塔有提供专门的命令行工具方便转码,可以自行去了解
<强>什么是巴别塔
官方解释,是下一代JavaScript语法的编译器。
既然是下一代Javascript的标准,浏览器因版本的不同对此会有兼容性问题,Javascript的新的方法都不能使用,但是目前我们在项目开发一直提倡使用最新的语法糖编写,不但能减少代码量,而且异步,等待等新特性还解决了回调的编写机制,减轻了代码维护成本。
巴别塔就因此而生,它可以让你放心使用大部分的JavaScript的新的标准的方法,然后编译成兼容绝大多数的主流浏览器的代码。在项目工程脚手架中,一般会使用.babelrc文件,通过配置一些参数配合webpack进行打包压缩。也通过网上了解,写法各有不同,参数也大不相同,因此,我重新整理一份资料,详细的介绍下各个配置项的意义所在,以便清晰了解如果使用。
以下配置主要正对webpack3 +写法。
<>强巴别塔转译器
在.babelrc配置文件中,主要是对预设(预设)和插件(插件)进行配置,因此不同的转译器作用不同的配置项,大致可分为以下三项:
1。语法转义器。主要对javascript最新的语法糖进行编译,并不负责转译javascript新增的api和全局对象,例如让/常量就可以被编译,而包括/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进一步对包括这类用法保证在浏览器的兼容性.Object。将会被编译成以下代码:
代码如下:
__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default ()
3. JSX和流的插件,这类转译器用来转译JSX语法和移除类型声明的,使用矩形的时候你将用到它,转译器名称为babel-preset-react
<>强创建预设(预设)
主要通过npm安装babel-preset-xx插件来配合使用,例如通过npm安装babel-preset-stage-2 babel-preset-env——save-dev安装,会有相应如下配置。
<强>阶段配置
巴别塔主要提供以下几种转义器,包括号里面是对应配置文件的配置项
不同阶段的转译器之间是包含的关系,preset-stage-0转译器除了包含了preset-stage-1的所有功能还增加了transform-do-expressions插件和transform-function-bind插件,同样preset-stage-1转译器除了包含preset-stage-2的全部功能外还增加了一些额外的功能。
<强>选项配置介绍
官方推荐使用babel-preset-env来替代一些插件包的安装(es2015-arrow-functions, es2015-block-scoped-functions等等),并且有如下几种配置信息,介绍几个常用的,
更多配置可以参考官网https://babeljs.io/docs/plugins/preset-env/
目标可以制定兼容浏览器版本,如果设置了浏览器,那么就会覆盖原目标本对浏览器的限制配置。
targets.node正对节点版本进行编译
模块通常都会设置为假,因为默认都是支持CommonJS规范,同时还有其他配置参数:“amd”|“umd格式”|“systemjs”|“CommonJS systemjs我还不知道规范写法是什么,amd和以umd格式及CommonJS相对比较熟悉,下面简要列举下书写规范。
amd代码规范,在ng1中会用到比较多,主要用于依赖注入:
