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时，为什么它无效？

自学 - Watch short videos and develop your skills：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

Answer 2

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

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

就是这样！

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

2 个答案: