javascript Sails.js 和 React.js，如何正确操作？

Sails.js with React.js, how to do it correctly?

提问by Anton Kulakov

I want to integrate React.js + browserify in my Sails.js-application.

我想在我的 Sails.js 应用程序中集成 React.js + browserify。

For this I use a grunt-plugin grunt-react.

为此，我使用了 grunt-plugin grunt-react。

I created a file /tasks/config/browserify.js

我创建了一个文件 /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');
};

Then I added a line in compileAssets.jsand syncAssets.js:

然后我在compileAssets.jsand 中添加了一行syncAssets.js：

// compileAssets.js

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

and

和

// syncAssets.js

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

Then i modified a line in copy.js.

然后我修改了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');
};

And it worked!

它奏效了！

But I think I did not do it quite right.

但我觉得我做得不太对。

If i uncommented line dev: {and }in /tasks/config/browserify.jslike this:

如果我取消注释行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');
};

And if I make changes in compileAssets.jsand syncAssets.js:

如果我在compileAssets.js和 中进行更改syncAssets.js：

// compileAssets.js

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

and

和

// syncAssets.js

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

it does not work!

这是行不通的！

Is it worth worrying about it?

值得担心吗？

And why is it not working when I add browserify: devin compileAssets.jsand syncAssets.jsfiles?

为什么它不工作的时候我加browserify: dev在compileAssets.js和syncAssets.js文件？

回答by Anton Kulakov

I found the right solution.

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

UPD: Now, we can use https://github.com/erikschlegel/sails-generate-reactjs

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

回答by Aymen Mouelhi

I have created grunt-reactifyto allow you to have a bundle file for a JSX file, in order to make it easier to work with modular React components. All what you have to do is to specify a parent destination folder and the source files:

我创建了grunt-reactify来允许你有一个 JSX 文件的包文件，以便更容易地使用模块化的 React 组件。您所要做的就是指定一个父目标文件夹和源文件：

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

In Sails, Go to the tasks/config folder and create a new file "reactify.js" and Insert the following code:

在 Sails 中，转到 tasks/config 文件夹并创建一个新文件“reactify.js”并插入以下代码：

module.exports = function (grunt) {

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

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

Then go to the file tasks/register/compileAssets.js and add reactify:

然后转到文件 tasks/register/compileAssets.js 并添加 reactify：

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

and that's it !

就是这样！