Laravel 5.4 Laravel长生不老药网页包

Question

我在laravel 5.4项目上成功安装了npm安装包。这是我的package.json：

{“private”：true，“scripts”：{“dev”：“node node_modules/cross env/dist/bin/cross-env.js node_env=development node_modules/webpack/bin/webpack.js--progress--hide modules--config=node_modules/laravel mix/setup/webpack.config.js”，

"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

}，

“devDependencies”：“{axios”：“^0.15.3”，“bootstrap sass”：“^3.3.7”，“jquery”：“^3.1.1”，“laravel elixir Web包react”：“^1.0.1”，“laravel mix”：“^0.8.1”，“lodash”：“^4.17.4”，“react”：“^15.4.2”，“react dom”：“^15.4.2”，“vue”：“^2.1.10”}

//这是我的webpack.mix.js

mix.sass（'resources/assets/sass/app.scss'，'public/css'）.js（'resources/assets/js/app.js'，'public/js/components'）；

我有一个简单的反应组件进行测试。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Example extends Component {
    render() {
        return (
            <h1>Works!</h1>
    );
    }
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

当我运行命令npm run dev时，我在编译react代码时遇到以下错误：

Syntax Error: Unexpected token (7:12)

   5 |     render() {
   6 |         return (
>  7 |             <h1>Works!</h1>
     |             ^
   8 |     );
   9 |     }
  10 | }

你知道我该怎么解决这个问题吗？

Answer 1

改变

mix.sass('resources/assets/sass/app.scss', 'public/css') 
   .js('resources/assets/js/app.js', 'public/js/components');

到

mix.sass('resources/assets/sass/app.scss', 'public/css') 
   .react('resources/assets/js/app.js', 'public/js/components');