ES6 Grunt 配置的动态目标

Question

我正在尝试配置 Grunt 以开始使用 ES6，以便它将每个组件的 JS 文件传输到它自己的文件夹中。

我有下一个目录结构：

Components
└──footer
│   └──js
│       └──footer.jsx
└──header
│   └──js
│       └──header.jsx
└──slider
    └──js
        └──slider.jsx

我需要得到下一个结果：

Components
└──footer
│   └──js
│   │   └──footer.jsx
│   └──compiled
│       └──footer.js
└──header
│   └──js
│   │   └──header.jsx
│   └──compiled
│       └──header.js
└──slider
    └──js
    │   └──slider.jsx
    └──compiled
        └──slider.js

目前我的配置如下：

babel: {
        options: {
            sourceMap: true,
            presets: ['env']
        },
        dist: {
            files: [{
                expand: true,
                cwd: "src/Components",
                src: ["**/*.jsx"],
                dest: 'compiled',
                ext: '.js',
                extDot: 'first'
            }]
        }
    }

并将所有编译后的文件放在一个公共文件夹中。

每个组件目录都编译JS应该怎么配置？

Answer 1

当building the files object dynamically you can utilize grunts rename属性生成和return一个新的目标路径。 rename 函数是您可以处理此类需求的逻辑的地方。

Gruntfile.js

// ...
babel: {
  options: {
    sourceMap: true,
    presets: ['env']
  },
  dist: {
    files: [{
      expand: true,
      cwd: 'src/Components',
      src: ["**/*.jsx"],
      dest: 'src/Components', // <--- This should be the same value as `cwd`
      rename: function (dest, src) {
        var destParts = dest.split('/'),
          srcParts = src.split('/');

        srcParts.splice((srcParts.length - 2), 1, 'compiled');
        return destParts.concat(srcParts).join('/');
      },
      ext: '.js',
      extDot: 'first'
    }]
  }
}
// ...

备注

rename函数接受两个参数，即src和dest。
在该函数中，dest 和 src 路径字符串都 split 到项目数组中。每个结果数组的每一项都是路径的一部分，因为 split('/') 使用 / 作为分隔符。
然后我们利用 splice() 替换数组中倒数第二个项目（即 src 路径的 js 部分），用新目录名称，即 compiled.
最后我们concat'用 dest 数组的部分生成新 srcParts 数组的所有项目。这个数组被转回一个字符串，用 / 连接项目以形成新的目标路径。这个新路径字符串是 returned.
dest 属性的值必须与 files 对象中 cwd 属性的值匹配。

ES6 Grunt 配置的动态目标

Dynamic dest for ES6 Grunt configuration

javascript

gruntjs

babeljs