在ES6中使用alt和react

Question

我想用React使用alt，并以ES6的风格编写一个Action。

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，它的工作，当我导入时，它编译，但它不工作。

如果我用react-scripts运行，它会显示一个错误，alt可以理解ES6类定义。

我做错了什么？

Answer 1

您的babel-loader只配置了.jsx文件。你需要为.js文件配置它，这也是你需要的。alt.js 是。要做到这一点，请使用regex /\.jsx?/

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