Sails.js与React.js,如何正确地做到这一点？

Question

我想在我的Sails.js-application中集成React.js + browserify.

为此,我使用grunt-plugin 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文件？

教你自己 - 观看简短的视频并发展你的技能:Swift,C#,Linux,Java,Angular,Unity,MongoDB,Python,Sketch,Figma,Git,PHP,Ruby,HTML,CSS,GraphQL,Vue.js,React.js ,Node.js,JavaScript ......

Answer 1

我找到了正确的解决方案.

UPD:现在,我们可以使用https://github.com/erikschlegel/sails-generate-reactjs