babel的plugins和presets解析

Posted 赵大树

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了babel的plugins和presets解析相关的知识,希望对你有一定的参考价值。

 

babel可以将当前运行平台(浏览器、node服务器)尚不支持的下一代或几代js语法编译为当前支持的js语法版本,比如可以把es6 es7和es8的js代码编译为es5的代码。

 

需要明确的几个概念:

 

  • es2015 === es6
  • es2016 === es7
  • es2017 === es8

 

 

plugin: babel的插件,在6.x版本之后babel必需要配合插件来进行工作

preset: babel插件集合的预设,包含某一部分的插件plugin

 

{
  "plugins": ["transform-es2015-arrow-functions"],
  "presets": ["es2015"]
}

 

babel-preset-es2015: 可以将es2015即es6的js代码编译为es5

babel-preset-es2016: 可以将es2016即es7的js代码编译为es6

babel-preset-es2017: 可以将es2017即es8的js代码编译为es7

babel-preset-stage-x: 可以将处于某一阶段的js语法编译为正式版本的js代码

stage-X: 指处于某一阶段的js语言提案。

  • 提案共分为五个阶段:
  • stage-0: 稻草人-只是一个大胆的想法
  • stage-1: 提案-初步尝试
  • stage-2: 初稿-完成初步规范
  • stage-3: 候选-完成规范和浏览器初步实现
  • stage-4: 完成-将被添加到下一年发布

 

当前 babel 推荐使用 babel-preset-env 替代 babel-preset-es2015 和 babel-preset-es2016 以及 babel-preset-es2017 ,env的支持范围更广,包含es2015 es2016 es2017的所有语法编译,并且它可以根据项目运行平台的支持情况自行选择编译版本。

使用方法: ‘.babelrc‘ 中 ‘es2015‘ 改为 ‘env‘,

.babelrc

{ "presets": ["env", "stage-2"] }

 

以上是关于babel的plugins和presets解析的主要内容,如果未能解决你的问题,请参考以下文章

如何写好.babelrc?Babel的presets和plugins配置解析

[转] 如何写好.babelrc?Babel的presets和plugins配置解析

@babel/preset-env 与@babel/plugin-transform-runtime 使用及场景区别

Babel的使用

babel-preset-es2015,babel-polyfill 与 babel-plugin-transform-runtime

Babel: plugin, preset的区别于使用