纱线运行babel src / - -d lib / babel - src / -d lib / -d不存在。 lib /不存在 [英] yarn run babel src/ -- -d lib/babel -- src/ -d lib/ -d doesn't exist. lib/ doesn't exist
问题描述
我正在按照 https://flow.org/en/docs/install/ 当我运行下面的命令时，它给我一个错误。
I am following steps of https://flow.org/en/docs/install/ When I am running below command then it is giving me an error.
纱线运行babel src / - -d lib / babel - src / -d lib /
yarn run 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
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"
]
}
更新
通过执行此命令解决上述错误纱线运行babel src / -d lib / 但现在得到以下错误。 BTW它在我的网络浏览器上运行完美。
Update
I resolved above error by executing this command yarn run babel src/ -d lib/ but now getting below error. BTW it is running perfect on my web browser.
> 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);
推荐答案
由于你有工作，我会去第二个错误。
Since you got it work, I will go with the second error.
您应该安装 preset-stage-0 =nofollow noreferrer> transform-runtime
You should install preset-stage-0 from Babel and transform-runtime
并将其添加到您的 .babelrc ：
{
"presets": [
"flow",
"react",
"es2015",
"stage-0"
],
"plugins": ["transform-runtime"]
}
正如他们在他们的网页上提到的那样
As they mention on their web page
此预设包含以下插件：
This preset includes the following plugins:
转换表达式
transform-function-bind
所有来自预设的插件：
预设阶段-1
preset-stage-2
preset-stage-3
所以你有一个更好的es6支持的一些功能，不包括在基础Babel transpiler
So you have a better es6 support for some features that are not included in the base Babel transpiler
最后但不是不重要 preset-state-2 包含 transform-class-properties ，这实际上是您在更新的问题中描述的错误。
And last but not less important preset-state-2 contains transform-class-properties which is actually the error that you describe in your updated question.
更新
当我们对您的问题进行跟踪时，我们意识到纱线运行不能像Babel CLI那样按预期工作。
相反，最好使用 npm 并将一个脚本添加到package.json中：
Update
As we were having a tracking of your problem, we realized that yarn run is not working as expected with the Babel CLI.
Instead is better to use npm and add a script to the package.json:
"scripts": {
"build": "babel src/ -d lib/"
}
然后：
npm run build
这篇关于纱线运行babel src / - -d lib / babel - src / -d lib / -d不存在。 lib /不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
