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 扩展 class。

感谢

Answer 1

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

Answer 2

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

import React from 'react';

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

注意：前面的意见- 根据我的经验，使用 Babel 是编译 ES6 和 ES7 以支持 JavaScript 的最佳方式。使用 Babel，您可以设置配置以使用 react-transform 插件来解决您当前遇到的问题。您可以阅读有关使用 Babel 以及如何使用 ES6 设置编写 React 组件的更多信息 here。

ES6(traceur) + Webpack + React

ES6(traceur) + Webpack + React

ecmascript-6

reactjs

webpack

traceur