ES6（traceur）+ Webpack + React

Question

是否可以在ES6中开发React组件？

例如：

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和React部分可以使用 6to5 转换器。将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是基于每个文件禁用小型运行时的注入。相反，将提供全局的，如插件配置中所述。

• The 6to5 project
• Support for JSX
• 6to5-loader for Webpack

Answer 2

您绝对可以使用ES6来构建React组件。

import React from 'react';

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

注意：意见未来 - 根据我的经验，使用Babel可以最好地编译ES6＆amp; ES7支持JavaScript。使用Babel，您可以设置配置以使用react-transform插件来处理您当前遇到的问题。您可以阅读有关使用Babel的更多信息，以及如何使用ES6设置here创建React组件。