babel plugin和presets是什么，怎么用?

https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/

当开发react或者vuejs app时，开发者可能经常需要在不同的babel configuration(.bablerc)中切换。你应该在package.json文件中见到过以下代码:

// package.json

{

  "babel": {

    "presets": [

      "es2015",

      "stage-0"

    ]

  }

}

或者在.babelrc文件中，可能看到下面的东西:

// .babelrc

{

  "plugins": ["transform-class-properties"]

}

本文，我们就好好说道说道这个stage-x是个啥，以及为什么我们这样来配置babel，也就是说我们将探讨babel plugins和presets.

什么是Babel?

为了理解为什么会出现Babel,我们就需要了解一下javascript的历史了。。。

ES5,ES6,ES7

我们知道javascript是web语言，她在不同浏览器中运行，比如chrome,firefox,safari,edge,ie等。不同的浏览器会有不同的javascript解释器，js就由这些解释器引擎翻译和运行。由于js被internet界广泛接受，应用越来越多，随后就有了规范组织用于管理js语言本身的规范。js所遵循的sepec就称为ecmascript或者ES

其中的第5版被称为ES5.你可以将ES5想象为js语言本身的一个版本，该版本在2009年定稿,目前主流浏览器全部实现了ES5.

而第6个版本被称为ES6，最终在2015年定稿，目前主流浏览器大都还没有支持其功能。

ES7则是基于ES6做了更多的改进，最新版本于2016年初步定稿，ES7只有两个新的功能.

作为js的未来，我们希望直接在今天就开始使用ES6/ES7，但是我们也希望我们的代码能够在目前的主流浏览器中能够正确地运行，这就是Babel为什么能够产生地原因。(除了babel, typescript也可以实现类似地功能)babel允许我们完全以ES6/ES7规范来写js代码，同时编译成es5地代码，以便最终可以在当前并未实现es6规范的浏览器上运行

使用babel

在项目中，我们可以以几种方式来使用babel.最简单和快捷的方式是使用一个package babel-standalone.你可以通过一个script tag来引用它。

<script

  src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"

></script>

引入babel以后，babel就会自动将任何以text/babel为type的script进行stranpile

<div id="output"></div>

<script type="text/babel">

const getMessage = () => "Hello World"; // ES6!

document.getElementById('output').innerHTML = getMessage();

</script>

像create-react-app这样的项目会自动地引用并且配置好babel，因此你可以0配置开始写react components

Babel Plugins和presets

babel提供了一种开放的架构，通过plugin来对不同的feature做transformation.由于feature特别多，那么就会对应着bable plugin特别多，如何管理好这些plugin也是一个挑战。

在babel中，a preset is a set of plugins used to support particular language features.

Presets are sharable .babelrc configs or simply an array of babel plugins.

有两个preset会被babel默认使用:

es2015: 增加对ES2015功能地支持

react: 支持JSX

记住:ES2015仅仅是ES6的另外一种叫法，我们使用ES2015 preset因为我们不会使用ES7的新功能

除了ES7,js features可以在不同的stages中存在。一个feature可以是一种experimental proposal(实验性质)的，也就是说社区还在就一些细节进行研究(stage1).

experimental proposals有非常大的风险会被舍弃或者大幅修改。一个feature也可能是ratified状态的(批准)，将会被在下一个js的release中包含("stage4")

具体地：

TC39工作组将proposals分门别类为以下stages:

stage-0 - Strawman: just an idea, possible Babel plugin.
stage-1 - Proposal: this is worth working on.
stage-2 - Draft: initial spec.
stage-3 - Candidate: complete spec and initial browser implementations.
stage-4 - Finished: will be added to the next yearly release.

我们可以通过使用presets或/和 plugins配置babel来尝鲜或者使用这些即将到来的或者说实验性质的功能.

哪些plugins或者presets是"safe"的？

babel会针对那些早于stage-3的feature做出警告，因为他们可能会被废弃或者大幅修改。特别是如果你从事教育工作，最好不要教授那些feature,因为很有可能会舍弃

如何使用babel plugin和presets

有两种主要的配置babel方式。

在package.json文件中

你可以像下面的package.json文件一样罗列出对应的presets和plugins列表：

// package.json

{

  "babel": {      // nest config under "babel"

    "presets": [

      "es2015",

      "react",

      "stage-3"

    ],

    "plugins": ["transform-class-properties"]

  }

}

　　 2..babelrc

// .babelrc

{

  "presets": [

    "es2015",

    "react",

    "stage-3"

  ],

  "plugins": ["transform-class-properties"]

}

一般比较推荐通过.babelrc方式来配置babel