如何设置 Grunt、Webpack 和 Babel答案

【问题标题】：How to setup Grunt, Webpack and Babel如何设置 Grunt、Webpack 和 Babel
【发布时间】：2015-09-23 22:30:00
【问题描述】：

所以，我想知道将 Babel 和 Webpack 与 Grunt 集成的最佳实践是什么。 Webpack 有一个grunt-babel plugin、一个grunt-webpack 插件和一个babel-loader。应该在 Webpack 中配置 Babel，还是在 Grunt 配置中？

前端开发让我快死了。

【问题讨论】：

我在同一班火车上。零散的文档让我死了。这是我的配置dpaste.com/3NBJE8E，也许有帮助。请注意，我完全跳过了 webpack 配置，只设置了 Gruntfile.js
我不知道有什么最佳实践，但如果我使用它，我更喜欢在 Webpack 中做尽可能多的事情。我想我的答案是“保持一致”。要么使用 Webpack 的全部功能并尽可能多地做，要么在 Webpack 中做最少的工作并专注于 Grunt。不要把它分散在两个地方。只是我的两分钱。

【解决方案1】：

前段时间我也遇到过这个问题，但设法为我和我的团队找到了一个可行的解决方案。

应该在 Webpack 中配置 Babel，还是在 Grunt 配置中？

这完全取决于你，但无论你决定什么：坚持下去。不要在那里配置某些东西，而不要在其他地方配置其他工具。完全在 Webpack 或 Grunt 中完成。

由于我所有的项目配置都是在Gruntfile.js 中完成的，我发现在那里定义 Babel （或我所有的插件）也很方便。 将其拆分为多个文件只会令人困惑。

如果有人可能会尝试使用 Babel 和 Grunt 使用 grunt-browserify 的另一个工作流程，我写了一点 ES6 boilerplate 来介绍如何设置正确的项目。

【讨论】：