Используйте Alt с реагировать в ES6 - PullRequest
Новая
       60

Используйте Alt с реагировать в ES6

0 голосов
/ 01 мая 2020

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

import alt from '../alt';

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

export default alt.createActions(LoginActions);

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

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

Мой пакет. 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 определение.

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

1 Ответ

2 голосов
/ 01 мая 2020

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

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