ES6(示踪)+ Webpack +反应

Question

是否有可能在ES6中开发反应组件？

例如：

import MyWdiget from './MyWidget';

React.render(<MyWidget />, mountNode);

还可以使用ES6定义组件：

class MyWidget extends ReactComponent {

    render() {
        <h3>Hello from Widget</h3>
    }
}

用webpack来建造这一切？webpack配置文件会是什么样子？

我成功地使用traceur和webpack编译了ES6代码，但不能将JSX转换为javascript，也不能使用ES6扩展类。

Thx

Answer 1

在ES6 6到5转换程序中使用React部分是可能的。编写响应组件是因为ES6类需要在框架中做一些工作。然而，JSX和其他漂亮的ES6功能可以在Webpack中移植。下面是一个部分配置示例：

module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: [ '6to5?experimental=true&runtime=true' ] },
    ]
},
plugins: [
    new webpack.ProvidePlugin({
        to5Runtime: "imports?global=>{}!exports-loader?global.to5Runtime!6to5/runtime"
    })
]

模块加载程序能够通过启用experimental选项来处理JSX。另一个选项，runtime，是在每个文件的基础上禁用一个小型运行时的注入。相反，将提供一个全局的，正如插件配置中所述。

• 6至5工程
• 对JSX的支持
• Webpack 6至5-装载机

Answer 2

您肯定可以使用ES6来构建React组件。

​

import React from 'react';

class Hello extends React.Component {
  render() : {
    return <div>Hello World!</div>
  }
}

​

注意:前面的意见--在我的经验中，使用Babel是编译ES6 & ES7以支持JavaScript的最佳方法。使用Babel，您可以设置配置来使用插件来解决当前存在的问题。您可以阅读更多关于with的内容，以及如何使用ES6 setup 这里编写反应组件。