we write about the things we build and the things we consume
Thomas McDevitt

fesktacular: keeping modules up-to-date

I recently did some work on FESK‘s build process to bring it up to date. Whilst the gulpfile we had in the project had some very diverse functionality, many iterations have left it a little stale so a lot of the work I did involved updating the modules and adapting to new implementations. Once this was in place, there was a bit of dividing the gulpfile into smaller pieces to make the whole lot easier to work on into the future. This post just goes over a recent update to a dependency called babel.

babel is…

…a module used as part of the ES6 to 5 transpilation. Previous versions of babel included all of its plugins out of the box. As of version 6, they need to be included manually. Running the build task without updating it for the new version of babel continually returned this error:

events.js:160
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

That’s odd. This is the error that gets thrown when something goes wrong with the ES6 import/export syntax which is precisely the behaviour this build stage should be able to handle. After some frantic Googling, I figured out that — as mentioned above — additional plugins would be needed to effect this step properly. Fortunately, this was easy to implement.

babel plugins

Which plugins a user needs depends on what transformations they’re doing specifically; for our purposes, we just needed the ES2015 plugin as a dependency:

npm install --save-dev babel-preset-es2015

With this, we just add this as a transformation during the transpilation step of the gulp task.

browserify({
    entries: 'src/js/main.js',
    debug: true,
    transform: [
      babelify.configure({
        // other presets simply go in this array
        presets: ['es2015']
      })
    ]
  })
  .bundle()
  // ... continued

We now have a more up-to-date and streamlined transpilation step in our build pipeline. Obviously you can check the docs for a full-list of transformations available to projects using babel.

what next?

There was more to the gulpfile update; implementation of other dependencies needed to be updated as well as the files split into more manageable chunks, but this is a quick tip for anyone who may have got stuck with the same error message while updating their version of babel. Let us know if it helped!

If you enjoyed the read, drop us a comment below or share the article, follow us on Twitter or subscribe to our #MetaBeers newsletter. Before you go, grab a PDF of the article, and let us know if it’s time we worked together.

blog comments powered by Disqus
sign up to #metabeers
slideshow