Babel-Preset-Env

babel介绍babel总共分为3个阶段: 解析、转换和生成 babel自身不具备任何转换性能， 如果没有plugin,那么通过babel的代码和输出的是雷同的。 babel插件分为两种 语法插件：在解析的过程中，能使babel可能解析更多的语法转译插件: 在转换的过程中将代码输入。比方将箭头函数转译成失常的函数其中preset就是babel罕用的转译插件 preset介绍preset是一套标准， 外面蕴含了几十个转译插件。这是一组插件的汇合 preset能够分为上面几种： 按官网内容: env, react, flow, minifystage-x：stage-0 至 stage-3代表了es规范反对的不同阶段。0阶段是最高级的阶段，能够了解为仅仅才开始探讨规范， 换句话说就是根本没有什么浏览器反对es新规范。3示意成熟阶段，意味着支流浏览器的新版本都反对大部分新规范，根底的es新规范个性不须要降级编译为es5，浏览器即可原生反对。stage-3包含以下插件： transform-async-to-generator 反对async/awaittransform-exponentiation-operator 反对幂运算符语法糖stage-2包含stage-3的所有插件，额定还包含以下插件： syntax-trailing-function-commas 反对尾逗号函数，额...很鸡肋transform-object-reset-spread 反对对象的解构赋值stage-1包含stage2所有插件，额定还包含以下插件： transform-class-constructor-call 反对class的构造函数transform-class-properties 反对class的static属性transform-decorators 反对es7的装璜者模式即@符号引入的办法 (还在探讨中的个性？)transform-export-extensions 反对export办法stage-0包含stage1所有插件，额定还包含以下插件： transform-do-expressions 反对在jsx中书写if/elsetransform-function-bind 反对::操作符来切换上下文，相似于es5的bindbabel-preset-env历史版本babel-preset-latest（已被弃用）最后，为了让开发者可能尽早用上新的JS个性，babel团队开发了babel-preset-latest。这个preset比拟非凡，它是多个preset的汇合(es2015+)，并且随着ECMA标准的更新更减少它的内容。 特点：蕴含了所有年度预设（babel-preset-es2015、babel-preset-es2016、babel-preset-es2017），无需用户独自指定某个预设。毛病：局部转码多余，如果应用默认设置，babel会将所有ES6与ES6+的新个性转成简单的es5的代码。然而大部分当初浏览器曾经反对ES6的局部个性。因为上述问题的存在，babel官网推出了babel-preset-env插件。它能够依据开发者的配置，按需加载插件。配置项大抵包含： 须要反对的平台：比方node、浏览器等。须要反对的平台的版本：比方反对node@6.1等。默认配置的状况下，它跟babel-preset-latest是等同的，会加载从es2015开始的所有preset。 //默认设置{ "presets": ["env"]}入门实例首先，装置依赖： npm install babel-cli --save-devnpm install babel-preset-env --save-dev创立一个index.js文件： let foo = () => 'foo';配置文件 .babelrc 如下，以后为默认配置。 { "presets": [ "env" ]}对index.js文件执行babel转化命令： // 形式一：.\node_modules\.bin\babel index.js// 形式二（npm5.2反对）：npx babel index.js转换后果如下： 'use strict';var foo = function foo() { return 'foo';};针对node版本的配置babel-preset-env 提供了更精细化的配置，以晋升编译速度，同时缩小代码冗余。比方咱们index.js的代码如下： ...