Friday, 13 November, 2015 UTC
Summary
This guide is the fourth in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6.
So you’ve written your app, your tests and your libraries in ES6. You’ve gotten so used to the new syntax that it feels unnatural even trying to write ES5. And this makes it all the more jarring when you add a Gulp file with an
import statement, and suddenly this happens:/unicorn-standard-boilerplate/gulpfile.js:1
(function (exports, require, module, __filename, __dirname) { import del from
^^^^^^
SyntaxError: Unexpected reserved word
Oops,
Installing dependencies
gulpfile.js only supports ES5. But lucky for you, teaching it ES6 is almost as simple as renaming a file. Almost…Skip this section if you’ve already added Babel 6 and any required presets/plugins to your project.
Babel 6 doesn’t play well with its younger self, so start by removing any older Babel packages from
package.json — babel, babel-core, etc. Next, clean up what’s left by deleting your node_modules directory and reinstalling your non-babel dependencies with npm install.We’ll need to install the
babel-core package to get access to the Babel require hook (which Gulp uses), and the babel-preset-es2015 package to get access to Babel’s collection of ES2015 transforms:npm install babel-core babel-preset-es2015 --save-dev
If you want to use any of ES6’s new built-ins in your Babel tasks — e.g.
Set, Symbol or Promise` — you’ll also need to install the Babel polyfill:npm install babel-polyfill --save-dev
But other tutorials say to install babel-polyfill with
Configuring Babel
--save, not --save-dev?
Yep, and they’re correct. The difference is that for Gulp,
babel-polyfill only needs to run while Gulp is running — not while your app is. If you’re using babel-polyfill in your application too, keep it is a a dependency, not a devDependency.
Here’s a fun facts about Babel 6: it won’t actually use the ES2015 package which you’ve uninstalled until you tell it to do so. Unfortunately, there is no way to get Gulp to pass this configuration to Babel. So instead we’ll need to create a
.babelrc file in the project’s root directory, which applies to the entire project:{
"presets": ["es2015"]
}
Hint: Global configuration
Telling Gulp to Babel
Unfortunately,
.babelrc is shared between all tools which can’t set their own configuration. For example, the Mocha test runner also reads .babelrc when used with the Babel register script. Plan accordingly, and try not to put anything in there which is going to surprise you later on.
Once you’ve got Babel installed and configured, teaching Gulp to pass the gulpfile through Babel is surprisingly simple. Just rename your
gulpfile.js to gulpfile.babel.js! You can then use the gulp command as before, but with ES6 syntax too!The only caveat is that if you also want to use ES6 built-ins like
Set, Promise and Symbol, you’ll need to require the babel-polyfill package that you installed earlier. To do so, just add an import statement to the very top of your gulpfile.babel.js:import `babel-polyfill`;
My experience is that the new built-ins aren’t always needed in gulpfiles, so don’t add this import unless you have a reason to.
Examples
For an example of a package with a
OK, it works! But for how long?
gulpfile.babel.js using Babel 6, see Unicorn Standard’s starter-kit.Here’s a little story: while writing this article, I learned that the require hook in
babel-core which Gulp uses is already set to be deprecated. Despite the fact that Babel 6 already introduced a new way of doing this only a few weeks ago. Unfortunately we can’t use the new package justs yet, as Gulp hasn’t quite caught up yet.Staying up to date in our JavaScript-driven world can be tough — and that’s why I provide my Newsletter! Subscribe to receive my latest guides on writing small apps with React. And in return for your e-mail, you’ll immediately receive three bonus print-optimised PDF cheatsheets – on React (see preview), ES6 and JavaScript promises. All for free!
I will send you useful articles, cheatsheets and code.
I won't send you useless inbox filler. No spam, ever.
Thanks! Please check your email for the link to your cheatsheets.
There was an error submitting your subscription. Please try again.
First Name
Email Address
I'd like to receive the free email course.
Subscribe for free
Unsubscribe at any time.
One more thing – I love hearing your questions, offers and opinions. If you have something to say, leave a comment or send me an e-mail at [email protected]. I’m looking forward to hearing from you!
Read More
- Babel Documentation: Require Hook
- Compiling ES6 NPM packages with the Babel 6 CLI
- Using ES6 and ES7 in the Browser, with Babel 6 and Webpack
- Learn Raw React
- See an ES6 Gulpfile in action at the Unicorn Standard Starter Kit
The post Teaching Gulp ES6, with Babel 6 appeared first on James K Nelson.