1

是否可以在 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 扩展类。

谢谢

4

2 回答 2

3

使用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是禁用基于每个文件的小型运行时注入。相反，将提供一个全局的，如插件配置中所述。

于 2015-01-22T16:33:31.110 回答
0

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

import React from 'react';

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

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

于 2015-12-29T21:03:03.617 回答