的更新

Question

我正在执行https://flow.org/en/docs/install/的步骤当我在命令下运行时，它会给我一个错误。

纱线运行babel src / - -d lib / babel - src / -d lib /

yarn run babel src/ -- -d lib/babel -- src/ -d lib/
yarn run v0.23.3
$ "D:\ReactJS\todo-app\node_modules\.bin\babel" src/ -d lib/babel -- src/ -d lib/
-d doesn't exist. lib/ doesn't exist
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

的package.json

{
  "name": "todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.5",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "flow-bin": "^0.48.0",
    "react-scripts": "1.0.7",
    "redux-devtools": "^3.4.0",
    "webpack": "^2.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "babel-version": "babel --version"
  }
}

.babelrc

{
    "presets": [
        "flow",
        "react",
        "es2015"
    ]
}

更新

我通过执行此命令yarn run babel src/ -d lib/解决了上述错误，但现在遇到错误。顺便说一句，它在我的网络浏览器上运行得很好。

> yarn run babel src/ -d lib/
yarn run v0.23.3
$ "D:\ReactJS\todo-app\node_modules\.bin\babel" src/
SyntaxError: src/App.js: Unexpected token (42:13)
  40 |   }
  41 |
> 42 |   handleOpen = () => {
     |              ^
  43 |     this.setState({ open: true });
  44 |   };
  45 |
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

App.js

/* @flow */

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

import AppBar from "material-ui/AppBar";
import FloatingActionButton from "material-ui/FloatingActionButton";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import * as strings from "./Strings";
import * as colors from "./Colors";
import styles from "./Styles";
import ContentAdd from "material-ui/svg-icons/content/add";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import * as injectTapEventPlugin from "react-tap-event-plugin";
import TextField from "material-ui/TextField";
import { List, ListItem } from "material-ui/List";
import { connect } from "react-redux";
import { addTodo } from "./actions/index";
import * as actions from "./actions/index";

const AppBarTest = () =>
  <AppBar
    title={strings.app_name}
    iconClassNameRight="muidocs-icon-navigation-expand-more"
    style={{ backgroundColor: colors.blue_color }}
  />;

class App extends Component {
  constructor(props) {
    injectTapEventPlugin();
    super(props);
    this.state = {
      open: false,
      todos: [],
      notetext: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleCreateNote = () => {
    let todos = [...this.state.todos];
    todos.push({
      id: todos.length,
      text: this.state.notetext,
      completed: false
    });
    this.setState({ todos: todos }, () => {
      // setState is async, so this is callback
    });
    this.props.addTodo(this.state.notetext);
    this.handleClose();
  };

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  _renderTodos() {
    return this.props.todos.map(event => {
      return (
        <ListItem
          primaryText={event.text}
          key={event.id}
          style={{ width: "100%", textAlign: "center" }}
          onTouchTap={this._handleListItemClick.bind(this, event)}
        />
      );
    });
  }

  _handleListItemClick(item) {
    console.log(item);
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>
          <AppBarTest />
          <FloatingActionButton
            style={styles.fab}
            backgroundColor={colors.blue_color}
            onTouchTap={this.handleOpen}
          >
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            open={this.state.open}
            onRequestClose={this.handleClose}
            title={strings.dialog_create_note_title}
          >
            <TextField
              name="notetext"
              hintText="Note"
              style={{ width: "48%", float: "left", height: 48 }}
              defaultValue={this.state.noteVal}
              onChange={this.handleChange}
              onKeyPress={ev => {
                if (ev.key === "Enter") {
                  this.handleCreateNote();
                  ev.preventDefault();
                }
              }}
            />

            <div
              style={{
                width: "4%",
                height: "1",
                float: "left",
                visibility: "hidden"
              }}
            />

            <FlatButton
              label={strings.create_note}
              style={{ width: "48%", height: 48, float: "left" }}
              onTouchTap={this.handleCreateNote}
            />
          </Dialog>

          <List style={{ margin: 8 }}>
            {this._renderTodos()}
          </List>

        </div>
      </MuiThemeProvider>
    );
  }
}

function mapStateToProps(state) {
  return {
    todos: state.todos
  };
}

export default connect(mapStateToProps, actions)(App);

Answer 1

既然你得到了它，我将继续第二个错误。

您应该从Babel和preset-stage-0

安装transform-runtime

并将其添加到您的.babelrc：

{
    "presets": [
        "flow",
        "react",
        "es2015",
        "stage-0"
    ],
    "plugins": ["transform-runtime"]
}

正如他们在网页上提到的那样

此预设包括以下插件：

<强>变换-DO-表达式
  transform-function-bind

来自预设的所有插件：

<强>预设阶段-1
  预设阶段-2
  预置级-3

因此，您对基本Babel转换程序中未包含的某些功能有更好的es6支持

最后但同样重要的preset-state-2包含transform-class-properties，这实际上是您在更新的问题中描述的错误。

<强>

的更新

当我们跟踪您的问题时，我们意识到yarn run与Babel CLI无法正常工作。相反，最好使用npm并将一个脚本添加到package.json：

"scripts": { "build": "babel src/ -d lib/" }

然后：

npm run build

纱线运行babel src / - -d lib / babel - src / -d lib / -d不存在。 lib /不存在

更新

1 个答案:

的更新