让 reactify 和 browserify 与 ES6 一起工作答案

【问题标题】：Getting reactify and browserify to work with ES6让 reactify 和 browserify 与 ES6 一起工作
【发布时间】：2015-04-27 11:28:33
【问题描述】：

我有一个这样配置的 browserify 任务：

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: ['reactify']
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

我尝试将其配置为以这种方式使用 es6：

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: ['reactify', {'es6': true}]
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

这会导致错误：

错误：路径必须是字符串

鉴于我不想在 package.json 中配置转换，我无法从文档中了解如何执行此操作。任何帮助将不胜感激。

【问题讨论】：

标签： jsx grunt-browserify

【解决方案1】：

或者，您也可以使用 watchify 简单地编译 ES6 模块（无需 Grunt/Gulp）。

在 package.json 中，添加以下内容：

{
  "scripts": {
    "build": "watchify -o build/bundle.js -v -d assets/js/main.jsx"
  },
  "devDependencies": {
    "browserify": "^10.2.4",
    "envify": "^3.4.0",
    "reactify": "^1.1.1",
    "watchify": "^3.2.2"
  },
  "browserify": {
    "transform": [
      ["reactify", {"es6": true}],
      "envify"
    ]
  }
}

在终端/命令提示符下，运行npm run-script build。

【讨论】：

【解决方案2】：

我在转换选项后缺少一个括号。这有效：

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {
      src: 'assets/js/main.jsx',
      dest: '.tmp/public/js/main.js',
      options: {
        debug: true,
        extensions: ['.jsx'],
        transform: [
          [ 'reactify', {'es6': true} ]
        ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');
};

【讨论】：

谢谢，这个丢失的括号真的很难调试。