Question

我试图在WebPack 4的Electron应用程序中使用React with D3。

当前，我只是在尝试构建一个测试示例。我相信我已经完成了各种技术的整合-我能够绘制基本的硬编码形状而没有问题。

但是，有几个示例定义了要从应用程序JSX脚本传递的数据，但是使用示例代码时出现错误。基于这里的研究，我相信与JSX的编译有关。我已经添加了对'react'和'es2016'的支持，但是我无法解决它。

这是有问题的代码：

export default class App extends Component {

    state = {
        data: [12, 5, 6, 6, 9, 10],
        width: 700,
        height: 500,
        id: root
    }

    render() {
       /* ... not listed for brevity ... */
    }
}

这是我的“ webpack.config.js”：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

    watch: true,

    target: 'electron-renderer',

    entry: './app/src/renderer_process.js',

    output: {
        path: __dirname + '/app/build',
        publicPath: 'build/',
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2016']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                  loader: 'css-loader',
                  options: {
                    modules: true
                  }
                })
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true
        })
    ],

    resolve: {
      extensions: ['.js', '.json', '.jsx']
    }

}

这是我收到的错误：

ERROR in ./app/src/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/Projects/MyTestApp/app/src/App.jsx: Unexpected token (21:10)

  19 | export default class App extends Component {
  20 |
> 21 |     state = {
     |           ^
  22 |         data: [12, 5, 6, 6, 9, 10],
  23 |         width: 700,
  24 |         height: 500,

我想念的是什么，还是我看错了方向？

非常感谢，

体重

Answer 1

您需要配置.babelrc文件才能使用此语法。

尝试：

{
  "presets": [
    ["es2016"],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

并将此行从您的wabpack中删除

 options: {
            presets: ['react', 'es2016']
          }

或者如果您不想弄乱安装babel插件，只需将其放在构造函数中

constructor() {
    super();
    this.state = {
        data: [12, 5, 6, 6, 9, 10],
        width: 700,
        height: 500,
        id: root
    };
  }

在JSX React中定义数据的意外令牌错误

1 个答案: