./app/main 中的错误.js模块构建失败:语法错误:意外令牌 (10:18)

Question

当我使用'webpack'时，下面的错误....

./app/main中的错误.js模块生成失败：语法错误：意外令牌 （10：18）

   8 | 
   9 | function main(){
> 10 |   ReactDOM.render(<Hello />, document.getElementById('app'));
     |                   ^
  11 | }
  12 | main();
  13 | 

组件.jsx

<div><i>   import React from 'react';
     export default class Hello extends React.Component {
       render() {
       return (<h1>Hello World---component.jsx</h1>)
      }
  }</i></div>

主.js

 import React from 'react';
  import ReactDOM from 'react-dom';
  import Hello from './component.jsx';
   function main(){
    ReactDOM.render(<Hello />, document.getElementById('app'));
  }
  main();

包.json

{
  "name": "enviromentproject",
  "version": "1.0.0",
  "description": "一个用来做环境搭建的项目测试",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "author": "jkwu",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-runtime": "^6.20.0",
    "css-loader": "^0.26.1",
    "style-loader": "^0.13.1",
    "vue-hot-reload-api": "^2.0.7",
    "vue-html-loader": "^1.2.3",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "hexo-deployer-git": "^0.2.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack-dev-server": "^1.16.2"
  }
}

Answer 1

首先，你的component.jsx不应该在html标签内

简单写入

import React from 'react';
     export default class Hello extends React.Component {
       render() {
       return (<h1>Hello World---component.jsx</h1>)
      }
  }

其次，更重要的是，确保在 webpack 配置中指定 babel 作为 jsx 的加载器。

module : {
    loaders : [
      {
        test : /.jsx?/,
        exclude : /node_modules/,
        loader : 'babel'
      }
    ]
  }

此外，它不会导致问题，但您无需在函数中调用ReactDOM.render()

class Hello extends React.Component {
       render() {
       return (<h1>Hello World---component.jsx</h1>)
      }
  }
    ReactDOM.render(<Hello />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

添加"babel-preset-react"

npm install babel-preset-react并将"预设"选项添加到 webpack.config 中的 babel-loader 中.js

（或者你可以把它添加到你的.babelrc或包.js：http://babeljs.io/docs/usage/babelrc/）

下面是一个示例 webpack.config.js：

{ 
    test: /.jsx?$/,         // Match both .js and .jsx files
    exclude: /node_modules/, 
    loader: "babel", 
    query:
    {
        presets:['react']
    }
}

然后：npm install react-dom --save在主.js从 'react-dom' 导入 { 渲染 }

;

使用此渲染