在 ES6 中使用 alt 和 react

Question

我正在尝试将 alt 与 React 结合使用并以 ES6 风格编写 Action：

import alt from '../alt';

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

export default alt.createActions(LoginActions);

我的 .babelrc 正在使用 class 转换插件：

// 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 class 定义。

我做错了什么？

Answer 1

您的 babel-loader 仅为 .jsx 文件配置。您也需要为 alt.js 所在的 .js 文件配置它。为此，请使用正则表达式 /\.jsx?/

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

在 ES6 中使用 alt 和 react

Use alt with react in ES6

alt

reactjs

webpack

babeljs