Question

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]
};

Answer 1

您需要将index.js重命名为index.jsx。

Answer 2

愚蠢的问题：您是否尝试删除“条目”声明中的方括号？

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]
}

Answer 3

从第二个webpack配置文件中，查询应该在babel loader对象中。

module: {
  loaders: [
    {
      test: /\.js$/, 
      include: __dirname + '/app', 
      loader: "babel-loader",
      query: {
        presets: ['react']
      } 
    }
  ]
}

如果您打算使用es6，请不要忘记安装babel-preset-es2015插件。

Answer 4

工作守则here

把我的头撞在墙上之后（老实说，这有助于打败知识 - 所以它一无所获）......我做了一些小改动，似乎成功了现在：

将.js更改为.jsx - 我喜欢＆＃34;显式＆＃34;承认这些不是普通的。（不需要我想，更多风格）
~~我已经删除了babelrc文件并将查询移到webpack.config中...似乎更容易在一个文件中划分区域。~~这实际上并不适用于我... se＆＃39; la＆＃39; vie
＆＃34;解决方案＆＃34;似乎__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')
);

ReactJS：意外令牌＆lt;

4 个答案: