打开 Harmony 模式——我该怎么做才能 运行 ReactJS v0.13？

Question

我正在关注 this comment，我被告知要打开和谐模式以便使用 ReactJS v0.13 的破坏分配。

我用谷歌搜索了一下，找不到关于如何打开它的好答案。

如果打开 Harmony 模式不是一个好主意，我必须改用 ReactJS 的最高版本是什么？

更新 开发工作流程将使用 grunt 或 gulp.

Answer 1

您的问题没有单一的答案，因为它取决于您的开发构建工作流程。

如果您使用的是 node-jsx npm 包，例如：

require('node-jsx').install({harmony: true});

如果您使用命令行编译器：

JSX filename -harmony

webpack有解决方案，grunt等

WebPack 例如使用加载器标志：

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.jsx$/, loader: 'jsx-loader?harmony' }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.jsx')
    extensions: ['', '.js', '.json', '.jsx'] 
  }
};

有一个 option for gulp 是这样工作的：

var gulp = require('gulp');
var react = require('gulp-react');

gulp.task('default', function () {
    return gulp.src('template.jsx')
        .pipe(react({harmony: true}))  // enable harmony features
        .pipe(gulp.dest('dist'));
});

Answer 2

如果您使用 cdn 版本的 react 和 jsx 库从 v0.11 及更高版本

例如

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>

通过添加 ;harmony=true

相应地更改脚本标签以具有和谐模式

<script type="text/jsx;harmony=true">
/** @jsx React.DOM */
    var APP = React.createClass({
        render: function() {
            return (
                <div>
                    <BButton className="btn-primary" href="javascript:alert('hello');" ><BHeart /> React</BButton> // and so on..

归功于 Facebook docs on v0.11