首先，咱们来分析下你遇到的错误：当你把cwd指向上级目录../JSX时，Babel默认会从目标文件所在的目录（也就是上级的JSX目录）去查找预设和插件，但你的所有Babel依赖都是安装在App/node_modules里的，路径不匹配自然就找不到插件了。

下面给你两种可行的解决方案，选一个适合你的就行：

方案一：使用Babel的rootMode选项让它向上查找依赖 #

这个方法最简单，只需要在Babel的配置选项里添加rootMode: "upward"，它会让Babel从目标文件目录开始向上遍历，直到找到包含node_modules的目录（也就是你的App目录），这样就能正确找到安装的插件和预设了。

修改后的Gruntfile配置如下：

module.exports = function (grunt) {
  'use strict';
  grunt.initConfig({
    babel: {
      options: {
        sourceMap: false,
        presets: ["env", "react"],
        plugins: ["transform-es2015-modules-amd"],
        rootMode: "upward" // 关键：让Babel向上查找node_modules
      },
      dist: {
        files: [{
          expand: true,
          cwd: '../JSX', // 指向上级的JSX目录
          src: ['*.jsx'],
          dest: '../JSX_generated', // 输出到上级的生成目录
          ext: '.js'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-babel');
  grunt.registerTask('default', ['babel']);
};

方案二：用require.resolve指定依赖的绝对路径 #

如果rootMode选项对你的Babel版本不适用（比如较旧的Babel 6版本），可以直接用Node的require.resolve方法来指定每个预设和插件的绝对路径，这样Babel就会从Gruntfile所在的App目录去查找依赖，完全不受目标文件目录的影响。

修改后的配置如下：

module.exports = function (grunt) {
  'use strict';
  grunt.initConfig({
    babel: {
      options: {
        sourceMap: false,
        babelrc: false, // 禁用自动查找.babelrc，避免冲突
        presets: [
          require.resolve("@babel/preset-env"),
          require.resolve("@babel/preset-react")
        ],
        plugins: [
          require.resolve("babel-plugin-transform-es2015-modules-amd")
        ]
      },
      dist: {
        files: [{
          expand: true,
          cwd: '../JSX',
          src: ['*.jsx'],
          dest: '../JSX_generated',
          ext: '.js'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-babel');
  grunt.registerTask('default', ['babel']);
};

最后验证依赖 #

确保你的App/package.json里已经安装了所有需要的依赖，如果没有的话，在App目录下执行：

npm install grunt-babel @babel/preset-env @babel/preset-react babel-plugin-transform-es2015-modules-amd --save-dev

这样配置后，就能正常转译上级目录的JSX文件啦！

内容的提问来源于stack exchange，提问作者Jayavel