简体繁体 English

如何设置Grunt，Webpack和Babel

[英]How to setup Grunt, Webpack and Babel

原文 2015-07-06 16:59:30 9 1 gruntjs/ ecmascript-6/ webpack/ babeljs

So, I'm wondering what the best practices are for integrating Babel and Webpack with Grunt. 所以，我想知道将Babel和Webpack与Grunt集成的最佳实践是什么。 There is a grunt-babel plugin , a grunt-webpack plugin and a babel-loader for Webpack. 有一个grunt-babel插件，一个grunt-webpack插件和一个用于Webpack的babel-loader 。 Should one configure Babel in Webpack, or in the Grunt config? 应该在Webpack或Grunt配置中配置Babel吗？

Front-end development is killing me. 前端开发正在扼杀我。

1 个解决方案

I also struggled with this a while ago, but managed to find a working solution for me and my team. 我不久前也在努力解决这个问题，但我和我的团队找到了一个有效的解决方案。

Should one configure Babel in Webpack, or in the Grunt config? 应该在Webpack或Grunt配置中配置Babel吗？

Well that's completely up to, but whatever you decide: stick to it. 那完全取决于你，无论你决定什么：坚持下去。 Don't configure something there and another tool elsewhere. 不要在那里配置其他东西和其他工具。 Do it either completely in Webpack or Grunt. 在Webpack或Grunt中完全执行此操作。

As all my projects configuration is done in the Gruntfile.js anyway, I found it convenient to define Babel (or all my plugins in general) there as well. 因为我的所有项目配置都是在Gruntfile.js完成的，所以我发现在那里定义Babel （或者我的所有插件）也很方便。 Splitting it up in several files is just confusing . 将它拆分成几个文件只会令人困惑 。

In case anyone might try another workflow with grunt-browserify using Babel and Grunt, I wrote a little ES6 boilerplate in how to setup a proper project. 如果有人可能使用Babel和Grunt尝试使用grunt-browserify另一个工作流程，我写了一个关于如何设置正确项目的ES6样板。