转换多个 JSX 文件答案

【问题标题】：Transforming multiple JSX files转换多个 JSX 文件
【发布时间】：2015-02-07 17:38:24
【问题描述】：

在 grunt 中使用 browserify 将 jsx 文件转换为 js 文件时，有没有办法指定多个源 -> 目标映射？

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

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

【问题讨论】：

我不使用 grunt-browserify，但我假设任务的当前输出是单个捆绑文件？如果你想输出另一个包，你需要一个单独的任务。如果您可以提供您想要的输出示例，它可能有助于使问题更清晰。
是的，输出是一个单独的包。您建议为每个捆绑包制作单独的任务是有道理的。我想我最初的目标是为每个任务输出多个包，但这可能不受支持...
它可能会被 grunt browserify 支持，但任何东西都会在幕后运行多个 browserify “包”。 Browserify 是关于单一目的地的。您可以使用externa bundles 通过多个捆绑包构建应用程序。

标签： javascript gruntjs reactjs browserify

【解决方案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'
          }
        ]
      }
    }
});

【讨论】：