Question

我试图按照说明学习React Native开发：

nvm install v4.2.6
nvm alias default v4.2.6
npm install -g react-native-cli
react-native init RNApp
cd RNAPP

然后我打开iOS应用程序项目并编译程序。然后我得到了跟随错误：

...
++ NVM_NPM_PREFIX=/Users/user/.nvm/versions/node/v4.2.6
++ nvm_tree_contains_path /Users/user/.nvm /Users/user/.nvm/versions/node/v4.2.6
++ '[' -n '' ']'
+ [[ -x /Users/user/.nodenv/bin/nodenv ]]
+ react-native bundle --entry-file index.ios.js --platform ios --dev true --bundle-output /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app/main.jsbundle --assets-dest /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app
bundle: Created ReactPackager
uncaught error Error: ReferenceError: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
    at Logger.error (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
    at OptionManager.addConfig (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
    at OptionManager.findConfigs (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
    at OptionManager.init (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
    at File.initOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
    at transform (/Users/user/Desktop/RNApp/node_modules/react-native/packager/transformer.js:59:24)
TransformError: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
See logs /var/folders/g9/m3cmg0m10cl80xt362wpsld00000gn/T/react-packager.log
    at SocketClient._handleMessage (SocketClient.js:139:23)
    at BunserBuf.<anonymous> (SocketClient.js:53:42)
    at emitOne (events.js:77:13)
    at BunserBuf.emit (events.js:169:7)
    at BunserBuf.process (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:289:10)
    at /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:244:12
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)
Command /bin/sh failed with exit code 1

我做错了吗？或者只是在babel中存在一些反应原生支持的错误？

➜  RNApp  react-native --version
react-native-cli: 0.1.10
react-native: 0.18.1

但似乎run-android工作正常：

:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:preDexDebug
:app:dexDebug
:app:validateDebugSigning
:app:packageDebug
:app:zipalignDebug
:app:assembleDebug
:app:installDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

Answer 1

问题的根本原因是React Native使用了Babel 6，它不使用stage文件上的.babelrc选项，而react-deep-force-update是React的子依赖项Native，仍然使用该选项声明.babelrc文件。

这是任何第三方模块在自己的构建过程中仍然使用较旧的Babel并且不清除npm发布的配置文件的问题。

我通过将以下npm运行脚本添加到我的package json中解决了这个问题：

"scripts": {
  "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
  "postinstall": "npm run clean:babelrc"
}

除了.babelrc目录下的node_modules目录下的脚本之外，该脚本会在npm install目录下记录react-packager目录下的所有using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media; namespace TicTacToe { public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; static int x, y; SpriteBatch spriteBatch; static bool ifinitialized = false; static bool player,winOne,winTwo; Texture2D TTTS, TTTX, TTTR, mousex, mouseo; Texture2D[,] whatDraw; SpriteFont font; Rectangle[,] select; Vector2[,] position; MouseState mouse = new MouseState() ; MouseState prevMouse = new MouseState(); Rectangle mouseRect ; static bool[,] playerOne, playerTwo, total; public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; } protected override void Initialize() { mouse = Mouse.GetState(); playerOne = playerTwo = total = new bool[3, 3] { {false,false,false }, { false, false, false }, { false, false, false } }; select = new Rectangle[3, 3]; position = new Vector2[3, 3]; whatDraw = new Texture2D[3, 3]; position[0, 0] = new Vector2(0, 0); position[1, 0] = new Vector2(162, 0); position[2, 0] = new Vector2(322, 0); position[0, 1] = new Vector2(0, 162); position[1, 1] = new Vector2(162, 162); position[2, 1] = new Vector2(322, 162); position[0, 2] = new Vector2(0, 322); position[1, 2] = new Vector2(162, 322); position[2, 2] = new Vector2(322, 322); x = 0; y = 0; this.IsMouseVisible = false; base.Initialize(); } protected override void LoadContent() { spriteBatch = new SpriteBatch(GraphicsDevice); TTTS = Content.Load<Texture2D>("TTTScheme"); TTTR = Content.Load<Texture2D>("TTTR"); TTTX = Content.Load<Texture2D>("TTTX"); font = Content.Load<SpriteFont>("Font"); mouseo = Content.Load<Texture2D>("Mouse0;"); mousex = Content.Load<Texture2D>("mouseX;"); while (y<3) { while (x<3) { whatDraw[x, y] = Content.Load<Texture2D>("empty"); x++; } x = 0; y++; } y = 0; } protected override void UnloadContent() { } protected override void Update(GameTime gameTime) { if (GamePad.GetStat(PlayerIndex.One).Buttons.Back== ButtonState.Pressed) this.Exit(); if (!ifinitialized) { select[0, 0] = new Rectangle(0, 0,TTTX.Width,TTTX.Height); select[1, 0] = new Rectangle(162, 0, TTTX.Width, TTTX .Height); select[2, 0] = new Rectangle(322, 0, TTTX .Width, TTTX .Height); select[0, 1] = new Rectangle(0, 162, TTTX .Width, TTTX .Height); select[1, 1] = new Rectangle(162, 162, TTTX .Width, TTTX .Height); select[2, 1] = new Rectangle(322, 162, TTTX.Width, TTTX .Height); select[0, 2] = new Rectangle(0, 322, TTTX.Width, TTTX .Height); select[1, 2] = new Rectangle(162, 322, TTTX .Width, TTTX .Height); select[2, 2] = new Rectangle(322, 322, TTTX .Width, TTTX .Height); ifinitialized = true; } prevMouse = mouse; mouse = Mouse.GetState(); if (!winOne && !winTwo) { while (y < 3) { while (x < 3) { if (select[x, y].Contains(new Point(mouse.X, mouse.Y)) && mouse.LeftButton == ButtonState.Pressed && prevMouse.LeftButton == ButtonState.Released&& (total[x, y] == false)) { total[x, y] = true; if (player == false) { playerOne[x,y] = true; whatDraw[x,y] = TTTX; player = true; IfWona(); } else if (player == true) { playerTwo[x, y] = true; whatDraw[x,y] = TTTR; player = false; IfWonb(); } } x++; } x = 0; y++; } y = 0; } base.Update(gameTime); } protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.White); spriteBatch.Begin(); spriteBatch.Draw(TTTS, new Vector2(0, 0), Color.White); while(y<3) { while (x < 3) { spriteBatch.Draw(whatDraw[x, y], position[x, y], Color.White); x++; } x = 0; y++; } y = 0; if(player==true) spriteBatch.Draw(mouseo, new Vector2 (mouse.X-(mouseo .Width /2), mouse.Y-(mouseo .Height/2)), Color.White); if(player== false) spriteBatch.Draw(mousex, new Vector2(mouse.X - (mousex.Width / 2), mouse.Y - (mousex.Height / 2)), Color.White); spriteBatch.End(); base.Draw(gameTime); } static void IfWona() { if ((playerOne[0, 0] && playerOne[1, 0] && playerOne[2, 0]) || (playerOne[0, 1] && playerOne[1, 1] && playerOne[2, 1]) || (playerOne[0, 2] && playerOne[1, 2] && playerOne[2, 2]) || (playerOne[0, 0] && playerOne[1, 0] && playerOne[2, 0]) || (playerOne[0, 1] && playerOne[1, 1] && playerOne[2, 1]) || (playerOne[0, 2] && playerOne[1, 2] && playerOne[2, 2]) || (playerOne[0, 0] && playerOne[1, 1] && playerOne[2, 2]) || (playerOne[0, 2] && playerOne[1, 1] && playerOne[2, 0])) { winOne = true; } } static void IfWonb() { if ((playerTwo[0, 0] && playerTwo[1, 0] && playerTwo[2, 0]) || (playerTwo[0, 1] && playerTwo[1, 1] && playerTwo[2, 1]) || (playerTwo[0, 2] && playerTwo[1, 2] && playerTwo[2, 2]) || (playerTwo[0, 0] && playerTwo[1, 0] && playerTwo[2, 0]) || (playerTwo[0, 1] && playerTwo[1, 1] && playerTwo[2, 1]) || (playerTwo[0, 2] && playerTwo[1, 2] && playerTwo[2, 2]) || (playerTwo[0, 0] && playerTwo[1, 1] && playerTwo[2, 2]) || (playerTwo[0, 2] && playerTwo[1, 1] && playerTwo[2, 0])) { winTwo = true; } } } }个文件，这是React Native packager用来配置它的自己的巴贝尔规则。

问题是tracked on React Native GitHub repository。

Answer 2

我更新了npm包。

react-proxy ==> 1.1.2

react-deep-force-update ==> 2.0.1

您需要先在node_modules中删除包文件。然后安装新版本。

它对我有用。

ReactNativeCli init Helloworld项目使用Babel TransformError构建错误

2 个答案: