Babel ES2015的React-Native安装错误 [英] React-Native Install Error with Babel ES2015

查看：234
本文介绍了Babel ES2015的React-Native安装错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在入门项目文档中的示例。以下是我得到的安装和错误。 NODE为5.2，NPM为3.3.12。 Mac是El Capitain。



我收到错误：错误：相对于目录引用ES2015的目录找不到预设es2015。



然后，我们按照此处的建议，并将这两个预设全局和本地安装在项目中。您可以在下面的npm ls -g命令中看到它在全球安装。在本地安装在项目中后，我得到一个对等的依赖警告作出反应：UNMET PEER DEPENDENCY react@15.0.2



然后我安装了react@15.0.2。然后我重新运行反应本机运行，我得到相同的错误：

  Alains-MacBook-Pro：AwesomeProject klik $ react-native run-ios 
 /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413 
 throw new Error（/ * istanbul忽略下一个* /无法找到预设+ / * istanbul ignore next * /（0，_stringify2.default）（val）+相对于目录+ / * istanbul ignore next * /（0，_stringify2。默认值）（目录名））; 
 ^ 
 
错误：在/ Users / klik / projects / AwesomeProject / node_modules / babel-中找不到相对于目录/ Users / klik
的预设es2015 core / lib / transformation / file / options / option-manager.js：413：17 
在Array.map（native）

然后我在项目上运行npm安装，并再次得到相同的错误。

  Alains- MacBook-Pro：AwesomeProject klik $ npm -v 
 3.3.12 
 Alains-MacBook-Pro：AwesomeProject klik $ npm install 
 Alains-MacBook-Pro：AwesomeProject klik $ react-native run- ios 
 /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413 
 throw new错误（/ * istanbul ignore next * / + / * istanbul ignore next * /（0，_stringify2.default）（val）+相对于目录+ / * istanbul ignore next * /（0，_stringify2.default）（dirname）） ; 
 ^ 
 
错误：在/ Users / klik / projects / AwesomeProject / node_modules / babel-中找不到相对于目录/ Users / klik
的预设es2015 core / lib / transformation / file / options / option-manager.js：413：17 
在Array.map（native）
在OptionManager.resolvePresets（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transformation / file / options / option-manager.js：405：20）
在OptionManager.mergePresets（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transformation / file / options / option-manager.js：388：10）OptionManager.mergeOptions（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transform / file / options / option-manager）中的
 js：347：14）
在OptionManager.addConfig（/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10）
在OptionManager.findConfigs（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / tra nsformation / file / option-manager.js：454：16）
在OptionManager.init（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transform / file / options / option- manager.js：502：12）
在编译（/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69）
在加载程序（/ Users / klik / projects / AwesomeProject / node_modules / babel-register / lib / node.js：158：14）

然后我添加一个.babelrc文件与以下的JSON。在 Babeljs.io 阅读之后，我已经为其他项目工作了看到它再次建议这里，所以我试过了。它没有工作，但产生了引用承诺目录的这个不同的错误。这看起来像等待承诺在项目中的ios文件返回，这不存在，因为React-Native从未完成安装。在运行npm安装后，我所有的项目文件都是node_modules目录和package.json以及我添加的.babelrc文件：

  Alains-MacBook-Pro：AwesomeProject klik $ npm install 
 Alains-MacBook-Pro：AwesomeProject klik $ react-native run-ios 
 / Users / klik / projects / AwesomeProject / node_modules / promise / lib / done.js：10 
 throw err; 
 ^ 
 
错误：ENOENT：没有这样的文件或目录，uv_chdir 
在错误（本机）
在process.chdir（/ Users / klik / projects / AwesomeProject /node_modules/graceful-fs/polyfills.js:18:9）
在_runIOS（runIOS.js：51：11）
在runIOS.js：24：5 
在tryCallTwo（/用户/ klik / projects / AwesomeProject / node_modules / promise / lib / core.js：45：5）
在doResolve（/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:200： 13）
在新的Promise（/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:66:3）
在Array.runIOS（runIOS.js：23：10） 
在Object.run（/Users/klik/projects/AwesomeProject/node_modules/react-native/local-cli/cli.js:87:13）
在Object。< anonymous> （/Users/klik/.nvm/versions/node/v5.2.0/lib/node_modules/react-native-cli/index.js:88:7）

这是原始安装，错误：

  Alains-MacBook- Pro：〜klik $ npm ls -g --depth = 0 
 /Users/klik/.nvm/versions/node/v5.2.0/lib 
├──babel-cli@6.8.0 
├──babel-preset-es2015@6.6.0 
├──babel-preset-react@6.5.0 
├──cf-package@1.0.2 
├ ──eslint@2.10.2 
├──express@4.13.4 
├──firebase-tools@3.0.0 
├──gulp-cli@1.2.1 
├──jshint@2.9.2 
├──node-pre-gyp@0.6.28 
├──nodemon@1.9.2 
├──npm@3.3.12 
├──react-native-cli@0.2.0 
├──reindex-cli@0.4.1 
├──rnpm@1.7.0 
├──webpack @ 1.13.0 
└──webpack-dev-server@1.14.1 
 
 Alains-MacBook-Pro：〜klik $哪个节点
 ** / Users / klik /。 nvm / versions / node / v5.2.0 / bin / node ** 
 Alains-MacBook-Pro：〜klik $哪个npm 
 ** / Users / klik / .nvm / versions / node / v5.2.0 / bin / npm ** 
 Alains-MacBook-Pro：〜klik $ watchman -v 
 4.5.0 
 Alains-MacBook-Pro ：〜klik $ cd projects 
 Alains-MacBook-Pro：项目klik $ react-native init AwesomeProject 
这将引导您在/ Users / klik / projects / AwesomeProject $ b中创建一个新的React Native项目$ b从npm ...安装反应本机包
 /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413 
抛出新错误（/ * istanbul忽略下一个* /无法找到预设+ / * istanbul忽略下一个* /（0，_stringify2.default）（val）+相对于目录+ / * istanbul ignore next * （0，_stringify2.default）（dirname））; 
 ^ 
 
错误：在/ Users / klik / projects / AwesomeProject / node_modules / babel-中找不到相对于目录/ Users / klik
的预设es2015 core / lib / transformation / file / options / option-manager.js：413：17 
在Array.map（native）
在OptionManager.resolvePresets（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transformation / file / options / option-manager.js：405：20）
在OptionManager.mergePresets（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transformation / file / options / option-manager.js：388：10）OptionManager.mergeOptions（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transform / file / options / option-manager）中的
 js：347：14）
在OptionManager.addConfig（/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10）
在OptionManager.findConfigs（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / tra nsformation / file / option-manager.js：454：16）
在OptionManager.init（/ Users / klik / projects / AwesomeProject / node_modules / babel-core / lib / transform / file / options / option- manager.js：502：12）
在编译（/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69）
在加载程序（/ Users / klik / projects / AwesomeProject / node_modules / babel-register / lib / node.js：158：14）
 Alains-MacBook-Pro：项目klik $

任何想法都想到了吗？感谢您提前协助。

解决方案

tl; dr。
npm i babel-preset-react-native -save-dev
$ echo'{预设：[ react-native]}'>所以第一个错误中提到的问题在babel选项管理器中开始：


在OptionManager.init（/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12）



在试图找出如何获得任何反应本机项目运行时，我遇到了一个 Este的DevStack 用于反应。当我安装的时候，它的工作是广告。我去了代码，看看为什么这个工作，没有一个其他的工作。 Este有一个.babelrc文件。这是它：
Este .babelrc
{
presets：[react-native]，
env：{
production：{
plugins：[
transform-react-constant-elements，
transform-react-inline-elements
]
}
}
}



我将env设置添加到我之前创建的.babelrc中。这是当前的.babelrc文件。 

  {
retainLines：true，
compact：true，
评论：false，
plugins：[]，
presets：[react，react-native]，
env：{
插件：[
transform-react-constant-elements，
transform-react-inline-elements
] 
}，
sourceMaps false，
}

我将此选项配置添加到以前的每个项目中，包括问题的主题和他们每个人的工作。这包括 Firebase 的例子。他们都工作显然，Babel 6不再默认转换，您必须启用它。我在github上检查了 React-Native Babel Preset ，它处理转换。所以这是新的.babelrc文件，它的工作原理。 

  {预设：[react-native]} 
  pre> 
 
 
结果@jaxoncreed在他的问题中有正确的解决方案。 回答在那里表明有一个默认的回退.babelrc文件将被使用，如果你放在一个。在副本前几天下载的教程项目，该文件不存在。所以简短的答案是我需要在项目中添加.babelrc文件。
  npm我的babel-preset-react-native --save-dev 
 
 $ echo'{预设：[react-native]}'> .babelrc 
  
 
I am trying to start a new react-native project following the Getting Started example in the projects docs. Below is the install and error I get. NODE is 5.2, NPM is 3.3.12. Mac is El Capitain.



I get an error: Error: Couldn't find preset "es2015" relative to directory referencing ES2015 relative to directory.



I then follow the advice here and have both presets installed globally and locally in the project. You can see it in the npm ls -g command below that its installed globally. After installing it locally in the project, i get a peer deependency warning for react: UNMET PEER DEPENDENCY react@15.0.2



I then installed react@15.0.2. I then re-run react-native run-ios and I get the same error:
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
          throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
          ^

Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
    at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
    at Array.map (native)

I then run npm install on the project and get the same error again.
Alains-MacBook-Pro:AwesomeProject klik$ npm -v
3.3.12
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
          throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
          ^

Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
    at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
    at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
    at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
    at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
    at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
    at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
    at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
    at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)

I then add a .babelrc file with the following JSON. This has worked on other projects for me after reading it on Babeljs.io and I saw it suggested here again so I tried it. It didnt work but produced this different error referencing the promise directory. This looks like it waiting for a promise to return with the ios file in the project, which doesnt exist because React-Native never completed the install. All I have for files in the project after running npm install are node_modules directory and package.json and the .babelrc file I added:
Alains-MacBook-Pro:AwesomeProject klik$ npm install
Alains-MacBook-Pro:AwesomeProject klik$ react-native run-ios
/Users/klik/projects/AwesomeProject/node_modules/promise/lib/done.js:10
      throw err;
      ^

Error: ENOENT: no such file or directory, uv_chdir
    at Error (native)
    at process.chdir (/Users/klik/projects/AwesomeProject/node_modules/graceful-fs/polyfills.js:18:9)
    at _runIOS (runIOS.js:51:11)
    at runIOS.js:24:5
    at tryCallTwo (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:45:5)
    at doResolve (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:200:13)
    at new Promise (/Users/klik/projects/AwesomeProject/node_modules/promise/lib/core.js:66:3)
    at Array.runIOS (runIOS.js:23:10)
    at Object.run (/Users/klik/projects/AwesomeProject/node_modules/react-native/local-cli/cli.js:87:13)
    at Object.<anonymous> (/Users/klik/.nvm/versions/node/v5.2.0/lib/node_modules/react-native-cli/index.js:88:7)

This is the original install with error:
Alains-MacBook-Pro:~ klik$ npm ls -g --depth=0
/Users/klik/.nvm/versions/node/v5.2.0/lib
├── babel-cli@6.8.0
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0
├── cf-package@1.0.2
├── eslint@2.10.2
├── express@4.13.4
├── firebase-tools@3.0.0
├── gulp-cli@1.2.1
├── jshint@2.9.2
├── node-pre-gyp@0.6.28
├── nodemon@1.9.2
├── npm@3.3.12
├── react-native-cli@0.2.0
├── reindex-cli@0.4.1
├── rnpm@1.7.0
├── webpack@1.13.0
└── webpack-dev-server@1.14.1

Alains-MacBook-Pro:~ klik$ which node
**/Users/klik/.nvm/versions/node/v5.2.0/bin/node**
Alains-MacBook-Pro:~ klik$ which npm
**/Users/klik/.nvm/versions/node/v5.2.0/bin/npm**
Alains-MacBook-Pro:~ klik$ watchman -v
4.5.0
Alains-MacBook-Pro:~ klik$ cd projects
Alains-MacBook-Pro:projects klik$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/klik/projects/AwesomeProject
Installing react-native package from npm...
/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413
          throw new Error( /*istanbul ignore next*/"Couldn't find preset " + /*istanbul ignore next*/(0, _stringify2.default)(val) + " relative to directory " + /*istanbul ignore next*/(0, _stringify2.default)(dirname));
          ^

Error: Couldn't find preset "es2015" relative to directory "/Users/klik"
    at /Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:413:17
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:405:20)
    at OptionManager.mergePresets (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:388:10)
    at OptionManager.mergeOptions (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:347:14)
    at OptionManager.addConfig (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:248:10)
    at OptionManager.findConfigs (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:454:16)
    at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)
    at compile (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:112:69)
    at loader (/Users/klik/projects/AwesomeProject/node_modules/babel-register/lib/node.js:158:14)
Alains-MacBook-Pro:projects klik$ 

Any ideas come to mind? Thank you in advance for your help.
 解决方案 
tl;dr.
npm i babel-preset-react-native --save-dev
$ echo '{"presets": ["react-native"]}' > .babelrc



So the problem as noted in the first error starts in the babel options manager:
 at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)



While trying to figure out how to get any react-native project running, I came across Este's DevStack for react-native. When I installed, it worked as advertised. I went to the code to see why this worked and not one single other worked. Este has a .babelrc file. This is it:
Este .babelrc
    {
      "presets": ["react-native"],
      "env": {
        "production": {
          "plugins": [
            "transform-react-constant-elements",
            "transform-react-inline-elements"
          ]
        }
      }
    }



I added the "env" setting to the .babelrc i created earlier. This is the current .babelrc file. 
{
  "retainLines": true,
  "compact": true,
  "comments": false,
  "plugins": [],
  "presets": ["react", "react-native"],
  "env": {  
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-inline-elements"
      ]   
  },
  "sourceMaps": false,
}

I added this options configuration into each previous project including the one that is the subject of the question and everyone of them worked. This includes the Firebase, example. They all worked. Apparently, Babel 6 no longer does transforms by default and you have to enable it. I checked the React-Native Babel Preset on github and it handles transforms. So this is the new .babelrc file and it works. 
{"presets": ["react-native"]}

Turns out @jaxoncreed has the right solution in his question here. The answer there suggests there is a default fallback .babelrc file that will be used if you put one in. In the copy of the the tutorial project downloaded a few days ago, that file doesn't exist. So the short answer is I need to add the .babelrc file in the project.
npm i babel-preset-react-native --save-dev

$ echo '{"presets": ["react-native"]}' > .babelrc



                        
这篇关于Babel ES2015的React-Native安装错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆