React in laravel получает неожиданный токен синтаксиса

Question

Я понимаю, что этот вопрос задавали много, но я не могу найти ответ.Любая помощь будет принята с благодарностью, спасибо!

Согласно сообщению в laracasts относительно реакции на Laravel Джеффри Уэй говорит: Просто сделайте:

mix.react('src', 'output');

И мы установим всенеобходимые плагины Babel и настройте ваш .babelrc.

В моем проекте в настоящее время есть компонент, и в моем файле реакционного микса есть следующее:

mix.react('resources/assets/js/basicapp.js', 'public/js');

мой файл basicapp.js представляет собойпростая настройка компонента, например, так:

require('./components/Reactapp');

Когда я запускаю микс, он выдает ошибку: Ошибка сборки модуля: SyntaxError: Неожиданный токен (43:17)

  41 |   }
  42 | 
> 43 |   toggleSelected = (id, key) => {
     |                  ^
  44 |     let temp = [...this.state[key]]
  45 |     temp[id].selected = !temp[id].selected
  46 |     this.setState({

Я былломаю голову над этим уже два дня!Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ: После проверки нет файла .babelrc в соответствии с инструкциями Джеффри Вей, это должно быть автоматически сделано laravel.

Answer 1

После дальнейшего просмотра Laravel работает не только с es6.Мне пришлось добавить файл .babelrc, а затем добавить некоторые зависимости в package.json

Я добавил это в package.json devDependencies:

"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",

это уже было:

"babel-preset-react": "^6.24.1",

в файле .babelrc Я добавил это:

{
    "presets": [
        "react",
        "stage-0",
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "babel-plugin-transform-class-properties"
        ]
    ]
}

Answer 2

toggleSelected = (id, key) => {
......
}

Вы используете так называемый синтаксис полей / свойств класса для вашего обработчика событий.Этот синтаксис является экспериментальной функцией, которую можно использовать только в том случае, если вы предоставили следующее: @ babel / plugin-offer-class-propertiesСм. Свойства класса предложения

. Вам необходимо установить плагин с помощью этой команды:

npm install --save-dev @babel/plugin-proposal-class-properties

Answer 3

Я бы оставил это как комментарий, но у меня недостаточно очков, чтобы комментировать.Но работает ли он, если вы не используете синтаксис es6?

toggleSelected(id, key){}