Подтвердить что ты не робот

Sails.js с React.js, как это сделать правильно?

Я хочу интегрировать React.js + браузер в моем Sails.js-приложении.

Для этого я использую gunt-плагин grunt-react.

Я создал файл /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');
};

Затем я добавил строку в compileAssets.js и syncAssets.js:

// compileAssets.js

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

и

// syncAssets.js

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

Затем я изменил строку в 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');
};

И это сработало!

Но я думаю, что я не сделал это совершенно правильно.

Если я раскоментировал строку dev: { и } в /tasks/config/browserify.js следующим образом:

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

И если я вношу изменения в compileAssets.js и syncAssets.js:

// compileAssets.js

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

и

// syncAssets.js

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

он не работает!

Стоит ли беспокоиться об этом?

И почему он не работает, когда я добавляю browserify: dev в compileAssets.js и syncAssets.js файлы?

4b9b3361

Ответ 2

Я создал grunt-reactify, чтобы вы могли иметь файл пакета для JSX файла, чтобы упростить работу с модульные реактивные компоненты. Все, что вам нужно сделать, это указать родительскую папку-получатель и исходные файлы:

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