Получение реактивации и браузера для работы с ES6

Question

У меня есть задача 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. Любая помощь будет оценена.

Answer 1

Мне не хватало скобки после опции трансформации. Это работает:

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');
};

Answer 2

Кроме того, вы также можете просто скомпилировать модули ES6 (без Grunt/Gulp), используя watchify,

В 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,