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
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé la bonne solution.
UPD: Maintenant, nous pouvons utiliser https://github.com/erikschlegel/sails-generate-reactjs