react开发必不可少的.babelrc配置

来源：互联网发布：锐捷云课堂安装软件编辑：程序博客网时间：2024/06/07 21:21

不废话，先贴代码，再解释

{  "presets": [    "stage-0",     "es2015",    "react",    "stage-1",    "es2016",    "stage-2",    "es2017",    "stage-3"  ],  "plugins": [    "transform-decorators-legacy",    "transform-async-to-generator",    "transform-do-expressions",    "syntax-do-expressions"  ],  "env": {    "development": {      "presets": ["react-hmre"]    }  }}

react开发，最重要的功能就是用ES6或者ES7的语法写代码，写起来那个爽快，但是，想要享受这样的福利是需要下一番功夫的，跟我一起来安装需要的插件。

babel是前端开发的利器，babel官网提供了一大堆的插件给我们使用，有一个快捷办法可以一次性安装需要的babel插件。此安装方法包括了所有你需要编译ES2015 +中的内容。如果你有漏安装的插件，自行安装一下。推荐用国内的淘宝镜像(cnpm)安装，一般国外的npm安装很慢还会失败。

npm install --save-dev babel-preset-latest

transform-async-to-generator ：用于支持async/await书写方式

Inasync function foo() {  await bar();}Outvar _asyncToGenerator = function (fn) {  ...};var foo = _asyncToGenerator(function* () {  yield bar();});

transform-do-expressions ：用于支持JSX书写if… else…语句，这个很赞的插件，从此再也不用担心jsx只支持三元表达式了。

render() {    return (        <div className='myComponent'>        {do {          if(color === 'blue') { <BlueComponent/>; }          if(color === 'red') { <RedComponent/>; }          if(color === 'green') { <GreenComponent/>; }        }}    </div>    )}

0 0