Question

我试图将Grunt配置为开始使用ES6，以便将每个组件的JS文件发送到它自己的文件夹。

我有下一个目录结构：

＆＃13;

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

＆＃13;

我需要有下一个结果：

＆＃13;

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

＆＃13;

目前我有以下配置：

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时，您可以使用grunts rename属性生成并返回新的目标路径。 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()替换数组中最后一项的第二项（js路径的src部分），并使用新目录名，即compiled。

最后，我们concat使用srcParts数组的部分来添加新dest数组的所有项目。此数组将返回到使用/连接项目的String，以形成新的目标路径。返回此新路径String。

dest属性的值必须与cwd对象中files属性的值相匹配。

动态目标为ES6 Grunt配置

1 个答案: