ES6(traceur) + Webpack + React答案

【问题标题】：ES6(traceur) + Webpack + ReactES6(traceur) + Webpack + React
【发布时间】：2015-01-22 11:07:46
【问题描述】：

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

谢谢

【问题讨论】：

是的，您必须使用 6t5 项目，但我相信...
这是一大堆工具。仍然不确定是什么，何时以及如何。还有其他人经历过这个吗？
好的，到目前为止，它看起来像组件，因为类不受支持，但它在功能列表中：github.com/facebook/react/wiki/…

标签： reactjs ecmascript-6 webpack traceur

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

【讨论】：

谢谢！顺便说一句，这段代码会是未来的证明还是我应该只使用 ES5 和 common JS？
人们永远不知道 ES6 将如何在现实生活中得到支持 (kangax.github.io/compat-table/es6)。另一方面，代码何时能证明未来？最有可能的是，无论如何，您总是需要修改和改进您的代码。我想说，在等待“本地”支持的同时，您将能够很好地使用 ES6 和 6to5 或 traceur 等转译器。
FB 几天前添加了 ES6 类支持：facebook.github.io/react/blog/2015/01/27/…

【解决方案2】：

你绝对可以使用 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 设置 here 编写 React 组件的信息。

【讨论】：

是的，一年前 Babel 不支持 JSX，React 不支持 ES2015 类。现在容易多了。