babelHelpers.asyncToGenerator is not a function

[zhouzhongyuan]

错误描述

错误信息

babelHelpers.asyncToGenerator is not a function

错误截图

讨论 "babelHelpers.asyncToGenerator is not a function" on React-Native 0.16.0 and 0.17.0

错误背景

我的的.babelrc

{
  "presets": [
    "react-native", "react", "stage-0"
  ],
  "plugins": [
    "transform-async-to-generator"
  ]
}

错误原因

如同讨论中skevy所说

into your .babelrc and get the latest and greatest JS features. That's why we created the preset...it makes it easy for people to get started with a custom babelrc. Unfortunately, the stage-3 babel preset contains "async-to-generator", which transforms async function blah() into function* blah(). This is not necessary for react-native (and as you all have discovered, actually breaks), as it already includes transform-regenerator, which allows for consistent use of generators and async functions on the versions of JSC that react-native uses.
我的理解：

• stage-3包含async-to-generator, stage-0包含stage-3.
• plugins中包含async-to-generator. 重复一次。
• react-native中也包含async-to-generator. 重复两次。

解决方法

方法一

{ "presets": [ "react-native" ] }

方法二(添加一些可能会用到的plugin)

{
  "presets": [ "react-native" ],
  "plugins": [
    "transform-do-expressions",
    "transform-function-bind",
    "transform-class-constructor-call",
    "transform-export-extensions",
    "syntax-trailing-function-commas",
    "transform-exponentiation-operator"
  ]
}

方法三(与方法二原理相同，只是更加简单)

npm install babel-preset-react-native-stage-0 --save

{ "presets": ["react-native-stage-0"] }

延伸

根据方法三，加深了对与Babel的理解。

• preset， 中文“预设”，应该是说这个preset预设了很多需要用到的Plugin，不需要你自己一个一个的添加了。例如，以[babel-preset-react-native](https://github.com/facebook/react-native/tree/master/babel-preset`为例，写法"presets": [ "react-native" ],`，其中包括很多babel Plugin，如下：
  

• plugin, 中文“插件”，babel最基本的转换单元。

[zhouzhongyuan]

React Native项目的根目录下有文件夹src,src中有.babelrc.
内容如下

{
  "presets": ["es2015","react","stage-0"]
}

src/.babelrc对React Native的babel转换有影响吗？

答： 有。因为根目录下的.babelrc不能有"react","stage-0"，src下同样不能有。

解决办法

修改src/.babelrc为

{
  "presets": ["es2015"]
}

[zhouzhongyuan]

以下都是猜想

猜想：

React Native项目，项目名称为“AwesomeProject”， 目录结构如下。

├── android
├── app.json
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
├── package.json
├── src
│   ├── node_modules
│   ├── package.json
│   └── tutorial.md
└── tests
├── index.android.js
└── index.ios.js
如上述结构所示，AwesomeProject文件夹下有package.json,AwesomeProject/src文件夹下也有package.json。

1. 这两个package.json文件都会用到吗？
   答： 会。就近使用原则，逐级向上查找，找到了就停止，然后使用。例如Login使用到了react，逐级向上查找，在AwesomeProject/src的node_modules找到了，就是用此react，而不是使用AwesomeProject的node_modules里面的react。
2. 两个.babelrc都会使用到吗？
   答： 同第一个答案。

以上都是猜想