Sails.js mit React.js, wie geht das richtig?

Question

Ich möchte React.js + browserify in meine Sails.js-Anwendung integrieren.

Dazu verwende ich ein Grunt-Plugin grunt-react.

habe ich eine Datei /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'); 
}; 

Dann habe ich eine Linie in compileAssets.js und syncAssets.js hinzugefügt:

// compileAssets.js 

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

und

// syncAssets.js 

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

Dann ich eine Linie in copy.js modifiziert.

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

Und es hat funktioniert!

Aber ich denke, ich habe es nicht ganz richtig gemacht.

Wenn ich unkommentiert Linie dev: { und } in /tasks/config/browserify.js wie folgt aus:

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

Und wenn ich Änderungen in compileAssets.js und syncAssets.js:

// compileAssets.js 

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

und

// syncAssets.js 

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

es funktioniert nicht!

Lohnt es sich, sich darüber Gedanken zu machen?

Und warum funktioniert es nicht, wenn ich browserify: dev in compileAssets.js und syncAssets.js Dateien hinzufügen?

Answer 1

Ich fand die richtige Lösung.

UPD: Jetzt können wir verwenden https://github.com/erikschlegel/sails-generate-reactjs

Answer 2

ich grunt-reactify erstellt haben, können Sie eine Bundle-Datei für eine JSX-Datei haben, um es einfacher zu machen, mit modularen Komponenten reagieren zu arbeiten. Alles was Sie tun müssen, ist eine übergeordnete Zielordner und die Quelldateien angeben:

grunt.initConfig({ 
 
    reactify: { 
 
     'tmp': 'test/**/*.jsx' 
 
    }, 
 
})

In Sails, Gehen Sie auf die Aufgaben/config Ordner und erstellen Sie eine neue Datei „reactify. js“und fügen Sie den folgenden Code:

module.exports = function (grunt) { 
 

 
    grunt.config.set('reactify', { 
 
     '[Destination folder]': '[folder containing React Components]/**/*.jsx' 
 
    }); 
 

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

Dann gehen Sie zu der Datei tasks/register/compileAssets.js und fügen reactify:

module.exports = function (grunt) { 
 
\t grunt.registerTask('compileAssets', [ 
 
\t \t 'clean:dev', 
 
\t \t 'jst:dev', 
 
\t \t 'less:dev', 
 
\t \t 'copy:dev', 
 
\t \t 'coffee:dev', 
 
     'reactify' 
 
\t ]); 
 
};

und das ist es!