React-Native Install Error with Babel ES2015



我正试图按照项目文档中的"入门"示例启动一个新的react本机项目。下面是我得到的安装和错误。节点为5.2,NPM为3.3.12。Mac是El Capitain。

我得到一个错误:错误:找不到相对于目录的预设"es2015",引用相对于目录的es2015。

然后,我按照这里的建议,在项目中全局和本地安装了两个预设。您可以在下面的npmls-g命令中看到它是全局安装的。在项目中本地安装后,我收到了react的peer DEPENDENCY警告:UNMET peer DEPENDENCYreact@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安装,再次出现同样的错误。

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)

然后,我添加了一个.babelrc文件,其中包含以下JSON。在Babeljs.io上阅读后,这对我的其他项目也起到了作用,我在这里再次看到了它的建议,所以我尝试了一下。它没有起作用,但在引用promise目录时出现了不同的错误。这看起来像是在等待承诺返回项目中的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;
^
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$ 

有什么想法吗?提前感谢您的帮助。

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)

当我试图弄清楚如何运行任何react原生项目时,我遇到了Este的DevStack。当我安装时,它就像广告中说的那样工作。我查看了代码,看看为什么这一点有效,而其他任何一个都无效。Este有一个.babelrc文件。就是这样:Este.babelrc{"presets":["react native"],"env":{"生产":{"插件":["变换反应常量元素","转换反应内联元素"]}}}

我在之前创建的.babelrc中添加了"env"设置。这是当前的.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在默认情况下不再进行转换,你必须启用它。我在github上检查了React Native Babel Preset,它可以处理转换。这是新的.babelrc文件,它可以工作。

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

事实证明@jaxoncreed在这里有正确的解决方案。这里的答案表明,如果您放入一个默认的回退.babelrc文件,就会使用该文件。在几天前下载的教程项目副本中,该文件不存在。所以简单的答案是我需要在项目中添加.babelrc文件。

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

最新更新