使用Babel ES2015进行React-Native安装错误

时间：2016-05-21 20:58:34

标签： react-native ecmascript-6 babeljs

我正在尝试按照项目文档中的Getting Started示例启动一个新的react-native项目。以下是我得到的安装和错误。 NODE为5.2，NPM为3.3.12。 Mac是El Capitain。

我收到错误：错误：无法找到预设＆＃34; es2015＆＃34;相对于引用ES2015相对于目录的目录。

然后我按照建议here，在项目中全局和本地安装两个预设。您可以在下面的npm ls -g命令中看到它全局安装。在项目本地安装之后，我得到了一个同行深度警告反应：UNMET PEER DEPENDENCY react@15.0.2

然后我安装了react@15.0.2。然后我重新运行react-native run-ios并得到同样的错误：

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)

然后我在项目上运行npm install并再次出现同样的错误。

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)

然后我添加一个带有以下JSON的.babelrc文件。在Babeljs.io上阅读之后，我已经为其他项目工作了，我看到它再次提示here，所以我试了一下。它没有工作，但产生了引用promise目录的这个不同的错误。这看起来像等待承诺返回项目中的ios文件，因为React-Native从未完成安装，因此该文件不存在。在运行npm install之后我对项目中的文件的所有内容都是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;
      ^

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)

这是原始安装错误：

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$

想到任何想法？提前感谢您的帮助。

1 个答案:

答案 0 :(得分：1)

TL;博士。 npm i babel-preset-react-native --save-dev $ echo '{"presets": ["react-native"]}' > .babelrc

因此第一个错误中提到的问题始于babel选项管理器：  at OptionManager.init (/Users/klik/projects/AwesomeProject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:502:12)

在尝试弄清楚如何让任何反应本机项目运行时，我遇到了Este's DevStack反应本机。当我安装时，它就像宣传的那样工作。我去了代码，看看为什么这个工作，而没有一个其他工作。 Este有一个.babelrc文件。就是这个： Este .babelrc     {       “预设”：[“react-native”]，       “env”：{         “生产”： {           “插件”：[             “变换反应常数元素”，             “变换反应的内联元素”           ]         }       }     }

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

{
  "retainLines": true,
  "compact": true,
  "comments": false,
  "plugins": [],
  "presets": ["react", "react-native"],
  "env": {  
      "plugins": [
        "transform-react-constant-elements",
        "transform-react-inline-elements"
      ]   
  },
  "sourceMaps": false,
}

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

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

结果证明@jaxoncreed在question here中有正确的解决方案。 answer表示有一个默认的回退.babelrc文件，如果你把它放进去将会被使用。在几天前下载的教程项目的副本中，该文件不存在。所以简短的回答是我需要在项目中添加.babelrc文件。

npm i babel-preset-react-native --save-dev

$ echo '{"presets": ["react-native"]}' > .babelrc
相关问题
最新问题