TL; DR:为什么我的代码出错? Previous question是不同的(在线与桌面),它的答案对我不起作用。
完整代码here
基于代码或多或少来源于here(我还没到“课程结束”
问题:关注this“ReactJS简介”。演练有Webpack / Babel设置。它使用普通的JS运行,但是当我切换到JSX时它会窒息。这类似于this question,但这些答案似乎都不起作用。主要区别:网络游乐场与我的盒子上的本地游戏?
我正在处理的视频的结尾导致this code - 尽管如此,我只有3/4的路程,因此尚未包含这些部分。所以,我已经把它拨回this fork with my edits(对不起,如果我已经屠杀并推动我的更改......)
注意: BEFORE和AFTER是我唯一改变的事情。它适用于javascript / jquery - 但不适用于JSX。我发现了一些拼写错误,案例错误(thisItem vs thisitem)和一些不应该存在的项目(删除了括号)。
我已将“我的”输出版本更改为更接近“他们的”版本(Hello而不是HelloWorld),并进行了其他微小更改......同样的错误。
除了一些间距问题外,我看到的最大的剩余变化是版本 - 来自录制类的小版本颠簸。
我的代码:
.babelrc
{ "presets": [ "react" ] }
的package.json
{
"name": "github-battle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"production": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
"devDependencies": {
"babel-core": "^6.6.0",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"html-webpack-plugin": "^2.9.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders:[
{ test: /\.js$/,include: __dirname + '/app',loader: "babel-loader" }
]
},
plugins: [HtmlWebpackPluginConfig]
}
应用\ index.html的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Github Battle</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<body>
<div id="app"></div>
</body>
</html>
app \ index.js之前
var app = document.getElementbyid('app')
app.innerHTML = 'Hello
app \ index.js AFTER
var React = require('react');
var ReactDOM = require('react-dom');
var HelloWorld = React.createClass({
render: function () {
return <div> Hello World </div>
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);
结果:
> B:\Users\Chris\react-js\React-Fundamentals>npm run production
> gh-battle@1.0.0 production B:\Users\Chris\react-js\React-Fundamentals
> webpack -p
Hash: 21e367e251c35209471c
Version: webpack 1.12.14
Time: 375ms
Asset Size Chunks Chunk Names
index_bundle.js 289 bytes 0 [emitted] main
index.html 305 bytes [emitted]
[0] multi main 28 bytes {0} [built] [1 error]
[1] ./app/index.js 0 bytes [built] [failed]
ERROR in ./app/index.js
Module parse failed: B:\Users\Chris\react-js\React-Fundamentals\app\index.js Line 6: Unexpected token <
You may need an appropriate loader to handle this file type.
| var Hello = React.createClass({
| render: function () {
| return <div> Hello ReactJS World! </div>
| }
| });
@ multi main
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
B:\Users\Chris\react-js\React-Fundamentals>
webpack.config.js#2:相同的rror
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
...
module: {
loaders: [
{test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
],
query: {
presets: ['react']
}
},
plugins: [HTMLWebpackPluginConfig]
};
答案 0 :(得分:1)
您需要将index.js
重命名为index.jsx
。
答案 1 :(得分:1)
module.exports = {
entry: './app/index.js',
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders:[
{
test: /\.js$/,
include: __dirname + '/app',
loader: "babel-loader"
}
]
},
plugins: [HtmlWebpackPluginConfig]
}
答案 2 :(得分:1)
从第二个webpack配置文件中,查询应该在babel loader对象中。
module: {
loaders: [
{
test: /\.js$/,
include: __dirname + '/app',
loader: "babel-loader",
query: {
presets: ['react']
}
}
]
}
如果您打算使用es6,请不要忘记安装babel-preset-es2015
插件。
答案 3 :(得分:1)
工作守则here
把我的头撞在墙上之后(老实说,这有助于打败知识 - 所以它一无所获)......我做了一些小改动,似乎成功了现在:
__dirname + '/dir'
已更改为path.join(...)
- 实际包含var path = require('path')
。我将研究(并提出一个新问题,如果我找不到一个)这两个是如何/为什么不相等,但我只能假设它与不同的操作系统有关(Windows 10x64对我来说。) 编辑:: 只是一些随机戳,但include:__dirname + 'app',
失败...... '\app'
,'\app\'
,'/app'
,{{ 1}} ...不知道为什么,但path.join(...)有效。
另外值得注意的是,'/app/'
似乎有用,但不是下面的部分。文件名与目录,所以再次不确定区别。
webpack.config.js
template: __dirname + '...',
index.jsx
var path = require('path');
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.jsx'
],
output: {
path: path.join(__dirname, '/dist'),
filename: "index_bundle.js"
},
module: {
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, '/app'),
loader: "babel-loader"},
]
},
plugins: [HTMLWebpackPluginConfig]
};
的index.html
var React = require('react');
var ReactDOM = require('react-dom');
var HelloWorld = React.createClass({
render: function () {
return <div> Hello ReactJS World! </div>
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);