2019-01-24 JS 中的Babel是什么?

Bable简介

1. Babel可以把JSX语法编译成JS语法，使得写 UI代码更加方便。

不使用Babel：

const e = React.createElement;

// Display a "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

使用Babel：

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

2. Babel可以将ES6语法编译成ES5的语法，使你的应用不用担心在不支持ES6 的浏览器上无法运行的问题。

Babel 的使用

1. 浏览器端编译代码：在html文件中加入这段代码就可以在浏览器端转化JSX和ES6了。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

这种方式对于学习React，写一写简单的demo是没问题的，但是不适合在生产环境中使用，因为这种方式加载网页会很慢。

2. 通过Webpack编译：这种方式最常用，需要node.js环境。
   一般我们用create-react-app来新建react项目，create-react-app包含了Bable和Webpack，用Webpack打包react项目时，会自动运用Bable来编译代码。

RN 中的 Babel

RN 新建的项目默认是已经配置好了Babel 的。其中Bable默认配置的presets 是metro-react-native-babel-preset，在项目的package.json的devDependencise里面可以看得到。

但是如果你还要添加一些自定义的Babel配置，你可以配置babel.config.js（或者.babelrc（不建议））：Babel的配置

If you wish to use a custom Babel configuration by writing a .babelrc file in your project's root directory, you must specify all the plugins necessary to transform your code. React Native does not apply its default Babel configuration in this case. So, to make your life easier, you can use this preset to get the default configuration and then specify more plugins that run before it.

如果你想通过项目根目录下的.babelrc文件来配置babel，你必须指定所有RN需要的plugins来转换你的代码。所以，最简单的做法就是使用这个插件metro-react-native-babel-preset，来作为默认的配置，然后还可以指定更多的插件。