我是React.JS的新手(在Windows 10上),我正在实现第一个tuto,我用来为我的React.app设置基本工作区。但是在我的资源库中全局和本地设置webpack和babel软件包之后,并制作了第一个hello word应用程序,第一个版本没有用。
我的预安装:
npm install -g babel
npm install -g babel-cli
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
因此我的 package.json 包含:
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-cli": "^6.0.0",
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
}
}
我的存储库包含4个其他文件: index.html,App.jsx,main.js,webpack.config.js
的index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
App.jsx:
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8123
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
所以每当我发布&#34; npm start&#34;我得到了一个失败的构建(捕获附加 - )
有任何建议可以解决这个问题吗?
答案 0 :(得分:0)
我只是通过删除 node_modules 文件夹并暂停 npm install
来解决此问题