由于“找不到预设的‘stage-1’”，React-native 捆绑失败答案

【问题标题】：React-native bundling failed because of "couldn't find preset 'stage-1'"由于“找不到预设的‘stage-1’”，React-native 捆绑失败
【发布时间】：2018-02-21 09:54:02
【问题描述】：

我在 react-native 应用程序上收到以下错误：

错误：捆绑失败：“TransformError： /Users/codeaway/repos/webGL/node_modules/react-native-webgl/lib/index.js：找不到相对于目录的预设“stage-1” \"/Users/codeaway/repos/webGL/node_modules/react-native-webgl\""

我正在构建一个 react-native 应用程序，我需要在照片上实现过滤器，所以我想使用以下 npm 包（来自我的 package.json）：

"gl-react": "^3.13.0"
"gl-react-native": "^3.13.0"
"react-native-webgl": "^0.5.2"

代码极其简单；我真的只是想从包的文档中运行示例：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Surface } from "gl-react-native";
import { Shaders, Node, GLSL } from "gl-react"; 

const shaders = Shaders.create({
  helloGL: {
// This is our first fragment shader in GLSL language (OpenGL Shading Language)
// (GLSL code gets compiled and run on the GPU)
    frag: GLSL`
precision highp float;
varying vec2 uv;
void main() {
  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
`
// the main() function is called FOR EACH PIXELS
// the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
// we set in output the pixel color using the vec4(r,g,b,a) format.
// see GLSL_ES_Specification_1.0.17
  }
});

export default class webGL extends Component {
  render() {
    return (
      <View>
      <Surface width={200} height={200}>
        <Node shader={shaders.helloGL} />
      </Surface>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('webGL', () => webGL);

这是错误中提到的目录中的.bablerc（“/Users/codeaway/repos/webGL/node_modules/react-native-webgl\”）：

{
  "presets": ["es2015", "stage-1", "react"]
}

这是怎么回事？

【问题讨论】：

标签： react-native babeljs

【解决方案1】：

您需要将以下包添加到您的 package.json 文档中

"babel-core": "^6.24.1"
"babel-preset-stage-1": "^6.24.1"

然后使用npm install 安装它们。

似乎无论您在项目中使用什么进行捆绑（可能是 Webpack），都使用带有阶段 1 预设的 babel。

【讨论】：