babelHelpers.asyncToGenerator is not a function

zhouzhongyuan commented 7 years ago

错误描述

错误信息

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 commented 7 years ago

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 commented 7 years ago

以下都是猜想

猜想：

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。

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

zhouzhongyuan / qa