Используйте alt с реакцией в ES6

Я пытаюсь использовать alt с React и кодировать действие в стиле ES6:

import alt from '../alt';

class LoginActions {
  login() {
    alert('oi');
  }
}

export default alt.createActions(LoginActions);

Мой .babelrc использует плагин преобразования классов:

// without options
{
    "plugins": ["transform-class-properties"]
}

Мой package.json настроен с помощью babel и webpack

{
  "name": "npm-yarn-babel-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "6",
    "babel-loader": "7",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.1",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "alt": "^0.18.6",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "scripts": {
    "build": "webpack -p",
    "dev": "webpack-dev-server --hot --inline"
  }

У меня есть компонент Hello World:

import React, { Component } from 'react';

import LoginActions from './LoginActions';

export class HelloWorld extends Component {


    render() {
        return (
            <div className="hello-world">
                <h1>Hello World</h1>
            </div>
        );
    }
}
export default HelloWorld;

Я бегу как:

yarn run dev

Если я не импортирую LoginActions, он работает, когда я импортирую, он компилируется, но не работает.

Если я запускаю реагирующие сценарии, это показывает мне ошибку, что alt может понять определение класса ES6.

Что я делаю не так?


webpack reactjs babeljs alt
person ivan_filho    schedule 01.05.2020    source источник
comment
У вас есть alt в вашем package.json, поэтому вы можете сделать: import alt from 'alt';   -  person HMR    schedule 01.05.2020
comment
Мне нужно создать экземпляр alt перед его вызовом, я делаю это в файле alt.js и импортирую экземпляр alt   -  person ivan_filho    schedule 01.05.2020
comment
Вы получаете ошибку?   -  person HMR    schedule 01.05.2020
comment
Сюда нужно вставить весь код. и было бы лучше, если бы вы также добавили codsandbox.io   -  person MonteCristo    schedule 01.05.2020
comment
github.com/ivanfcfilho/temp   -  person ivan_filho    schedule 01.05.2020

Ответы (1)


arrow_upward
2
arrow_downward

Ваш загрузчик babel настроен только для файлов .jsx. Вам также нужно настроить его для файла .js, который является alt.js. Для этого используйте регулярное выражение /\.jsx?/

   {
         test: /\.jsx?/,
         use: {
            loader: 'babel-loader',
            options: { presets: ['react', 'es2015'] }
         }
     },
person Shubham Khatri    schedule 01.05.2020