我刚刚开始使用ReactJS
了解NodeJS
并尝试通过NPM
运行应用程序但是刚刚开始我收到以下错误:
You MUST specify an outfile with -o.
我的开始命令:
watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
整体错误:
C:\Users\Umair Shah Yousafzai\react-skeleton>npm start
> react-skeleton@1.0.0 start C:\Users\Umair Shah Yousafzai\react-skeleton
> watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
You MUST specify an outfile with -o.
npm ERR! Windows_NT 10.0.10240
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! react-skeleton@1.0.0 start: watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-skeleton@1.0.0 start script 'watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-skeleton package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! watchify src/main.jsx -v -t [ babelify --presets [ react ]] -o public/js/main.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-skeleton
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-skeleton
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Umair Shah Yousafzai\react-skeleton\npm-debug.log
我努力解决这个问题:
我已尝试删除node_modules
文件夹,然后运行npm install
,但我仍然收到同样的错误我的NPM
版本是3.8.9
我的文件:
main.jsx
:
var React = require('react');
var ReactDOM = require('react-dom');
var List = require('./components/List.jsx');
ReactDOM.render(<List />, document.getElementById('ingredients'));
List.jsx
:
var React = require('react');
var Listitem = require('./Listitem.jsx');
var ingredients = [{"id":1,"text":"ham"},{"id":2,"text":"cheese"},{"id":3,"text":"potatos"}];
var List = React.createClass({
render: function() {
var listItems = ingredients.map(function(item) {
return <Listitem key={item.id} ingredient={item.text} />
});
return (<ul>{listItems}</ul>);
}
});
module.exports = List;
Listitem.jsx
:
var React = require('react');
var Listitem = React.createClass({
render: function() {
return (
<li>
<h4>{this.props.ingredient}</h4>
</li>
);
}
});
module.exports = ListItem;
答案 0 :(得分:2)
尝试将-o {src}作为第一个选项; -t选项的子参数语法可能会搞乱。
ReactDOM.render("<List />", document.getElementById('ingredients'));
此外,您需要修复jsx文件。
main.jsx:
return "<Listitem key={item.id} ingredient={item.text} />"
return "<ul>{listItems}</ul>";
List.jsx:
return "<li><h4>{this.props.ingredient}</h4></li>";
Listitem.jsx:
{{1}}