ES6 Grunt动态输出目标配置：组件JSX文件编译至对应目录

刚好做过类似的配置，给你一步步捋清楚怎么实现这个需求：

第一步：安装必要依赖 #

首先在项目根目录执行下面的命令，安装转译所需的Grunt插件和Babel预设：

npm install grunt-babel @babel/core @babel/preset-env @babel/preset-react --save-dev

第二步：编写Gruntfile配置 #

在项目根目录的Gruntfile.js里添加如下配置，核心是用动态文件映射来匹配每个组件的JSX文件，并自定义输出路径：

module.exports = function(grunt) {
  grunt.initConfig({
    babel: {
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react'] // 同时处理ES6语法和JSX
      },
      dist: {
        files: [{
          expand: true, // 启用动态批量处理模式
          cwd: 'Components/', // 所有文件路径的基准目录
          src: ['**/js/*.jsx'], // 匹配所有组件下js目录里的jsx文件
          dest: 'Components/', // 输出的基准目录和源目录保持一致
          rename: function(dest, src) {
            // 把路径从 "footer/js/footer.jsx" 转换成 "footer/compiled/footer.js"
            const pathParts = src.split('/');
            // 将js目录替换为compiled，同时修改文件后缀
            pathParts[pathParts.length - 2] = 'compiled';
            pathParts[pathParts.length - 1] = pathParts[pathParts.length - 1].replace('.jsx', '.js');
            return dest + pathParts.join('/');
          }
        }]
      }
    }
  });

  // 加载babel任务插件
  grunt.loadNpmTasks('grunt-babel');

  // 注册默认任务，执行转译
  grunt.registerTask('default', ['babel']);
};

关键配置说明 #

• expand: true：开启动态文件模式，让我们可以批量处理文件并灵活自定义输出路径
• cwd: 'Components/'：指定所有匹配路径的基准目录，简化后续的路径匹配规则
• rename函数：这是实现每个组件单独生成compiled目录的核心，它会把每个JSX文件的路径中的js目录替换为compiled，同时将文件后缀从.jsx改为.js
• Babel预设：@babel/preset-env负责把ES6+语法转译成目标环境兼容的代码，@babel/preset-react专门处理JSX语法

运行转译任务 #

配置完成后，直接在命令行执行：

grunt

就能自动把每个组件下js目录里的JSX文件转译到对应组件的compiled目录中，完全符合你期望的目录结构。

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