web-dev-qa-db-ja.com

Sails.jsとReact.js、それを正しく行う方法は？

React.js + browserifyをSails.jsアプリケーションに統合したいと思います。

このために私は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を追加すると、なぜ機能しないのですか？

javascriptnode.jsreactjsgruntjssails.js
14
Anton Kulakov

私は正しい解決策を見つけました。

UPD：これで、 https://github.com/erikschlegel/sails-generate-reactjsを使用できます。

16
Anton Kulakov

モジュラーReactコンポーネントを簡単に操作できるようにするために、JSXファイルのバンドルファイルを作成できるようにするために grunt-reactify を作成しました。あなたがしなければならないのは、親の宛先フォルダとソースファイルを指定することです：

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

Sailsで、tasks/configフォルダーに移動し、新しいファイル「reactify.js」を作成して、次のコードを挿入します。

module.exports = function (grunt) {

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

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

次に、ファイルtasks/register/compileAssets.jsに移動し、reactifyを追加します。

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

以上です ！

4
Aymen Mouelhi