Sails.js avec React.js, comment le faire correctement?

Je souhaite intégrer React.js + browserify dans mes Voiles.js-application.

Pour cela, j'utilise un grognement-plugin grunt-réagir.

J'ai créé un fichier /tasks/config/browserify.js

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    //dev: {
      options:      {
        transform:  [ require('grunt-react').browserify ],
        extension: 'jsx'
      },
      app:          {
        src:        'assets/jsx/app.jsx',
        dest:       '.tmp/public/js/app.js'
      }
    //}
  });

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

Puis j'ai ajouté une ligne dans compileAssets.js et syncAssets.js:

//compileAssets.js

module.exports = function (grunt) {
    grunt.registerTask('compileAssets', [
        'clean:dev',
        'stylus:dev',
        'browserify',   //<<< this added
        'copy:dev'
    ]);
};

et

//syncAssets.js

module.exports = function (grunt) {
    grunt.registerTask('syncAssets', [
        'stylus:dev',
        'browserify',   //<<< this added
        'sync:dev'
    ]);
};

Puis j'ai modifié une ligne dans copy.js.

//copy.js

module.exports = function(grunt) {

    grunt.config.set('copy', {
        dev: {
            files: [{
                expand: true,
                cwd: './assets',
                src: ['**/*.!(styl|jsx)'],   ///<<< this modified
                dest: '.tmp/public'
            }]
        },
        build: {
            files: [{
                expand: true,
                cwd: '.tmp/public',
                src: ['**/*'],
                dest: 'www'
            }]
        }
    });

    grunt.loadNpmTasks('grunt-contrib-copy');
};

Et cela a fonctionné!

Mais je pense que je ne l'ai pas tout à fait droit.

Si j'ai décommenté la ligne dev: { et } dans /tasks/config/browserify.js comme ceci:

module.exports = function(grunt) {

  grunt.config.set('browserify', {
    dev: {                           ///<<< this uncommented
      options:      {
        transform:  [ require('grunt-react').browserify ],
        extension: 'jsx'
      },
      app:          {
        src:        'assets/jsx/app.jsx',
        dest:       '.tmp/public/js/app.js'
      }
    }                           ///<<< this uncommented
  });

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

Et si je fais des modifications dans compileAssets.js et syncAssets.js:

//compileAssets.js

module.exports = function (grunt) {
    grunt.registerTask('compileAssets', [
        'clean:dev',
        'stylus:dev',
        'browserify:dev',   //<<< this added :dev
        'copy:dev'
    ]);
};

et

//syncAssets.js

module.exports = function (grunt) {
    grunt.registerTask('syncAssets', [
        'stylus:dev',
        'browserify:dev',   //<<< this added :dev
        'sync:dev'
    ]);
};

il ne fonctionne pas!

Est-il la peine de s'inquiéter à ce sujet?

Et pourquoi il ne fonctionne pas quand j'ajoute browserify: dev dans compileAssets.js et syncAssets.js fichiers?

source d'informationauteur Anton Kulakov