转换多个 JSX 文件

Question

在 grunt 中使用 browserify 将 jsx 文件转换为 js 文件时，是否可以指定多个源 -> 目标映射？

我在 Gruntfile.js 中有以下支持单个文件转换的内容，但我希望能够为另一个文件指定第二个映射。我知道我可以基于通配符将其映射到一个组合的目标文件中。但是，这不是我想要的，因为我不想 "all or nothing" 在我的各个页面上包含反应组件。某些组件仅适用于少数页面，不应包含在所有页面中。

browserify: {
            options: {
                transform: [ require('grunt-react').browserify ]
            },
            //How do I map a second file here without a wild card?
            client: {
                src: ['react_components/src/component1.jsx'],
                dest: 'react_components/build/component1.js'
            }
        }

基本上我希望的是一种在同一任务中提供一组 src-dest 映射以创建多个目标文件的方法：

client: [{
                src: ['react_components/src/component1.jsx'],
                dest: 'react_components/build/component1.js'
            }]

类似于上面的内容json

Answer 1

至于我，我不使用browserify，我使用grunt-react和react-tools。 grunt react 允许用户根据正则表达式定义 dynamic_mappings，像这样：

//Gruntfile.js
grunt.initConfig({
    react: {
      dynamic_mappings: {
        files: [
          /* Controllers compiling. */
          {
            expand: true,
            cwd: './app/scripts/controllers/src',
            src: ['**/*.jsx'],
            dest: './app/scripts/controllers/dest',
            ext: '.js'
          },
          /* ui-components compiling */
          {
            expand: true,
            cwd: './app/scripts/ui-components/src',
            src: ['**/**.jsx'],
            dest: './app/scripts/ui-components/dest',
            ext: '.js'
          },
          /* JSX test compiling */
          {
            expand: true,
            cwd: './test/ui-components/src',
            src: ['**/**.jsx'],
            dest: './test/ui-components/dest',
                ext: '.test.js'
          }
        ]
      }
    }
});

转换多个 JSX 文件

Transforming multiple JSX files

javascript

browserify

gruntjs

reactjs