Babel 7 dynamic config – making Babel work with esm, Jest, JSX, and Preact server-side rendering

Babel enables use of modern JS code (ES2015 — ES2018) in browsers and environments that don’t inherently support it using a technique known as transpiling. One of the features I enjoy about Babel 7 (currently at beta 46) is the ability to provide a dynamic .babelrc.js configuration file rather than a statically defined .babelrc (JSON) file.

I recently adopted esm (for ES Modules support in Node.js; import and export) on the Verses for Life website.  One of the challenges I ran into with using esm was getting my server to use esm by default for development and production work, but still having my tests work.  (For general esm setup, see esm on npm.)

I’d already decided in the past to use Jest, but, unfortunately, Jest doesn’t play nicely with esm by default and Jest doesn’t support a --require flag like many other JS testing libraries.  So what to do?

The solution is allowing Jest to use Babel to transpile the modules during testing (so you avoid those pesky “unexpected token import” errors), but keeping esm in place for all your other dev and production work.

I set up my Babel 7 config (.babelrc.js) to use Babel to handle modules only in test mode, but esm does the work everywhere else.

.babelrc.js code

This approach enabled my tests to work again.  The downside of this approach is that the way modules are loaded in testing doesn’t match my other environments.  You’ll want to ensure you have appropriate integration tests (a la Puppeteer) to ensure your site works end-to-end.

If you’re early on in deciding your tooling, you can look at the list of the many other test libraries supported by esmand maybe you won’t need this work-around.

Six Sweet Resources for Web Developers

If you’re a web developer, you need access to information to do your job. Every day, you’re coding or debugging a new application, script, or program of some kind. You need access to documentation, bug reports, workarounds, and code examples. And, occasionally, you need to de-stress. Here are the sites I’ve incorporated into my workflow to help me get things done.

Q&A

Stack Overflow
The best site I’ve found for getting questions and answers about anything and everything code-related is Stack Overflow. As of this post, over 200,000 questions have been asked on the site.

Stack Overflow is easy to search because all questions are tagged. If you’re looking for answers to a Perl question about the GD image library, you can search for [Perl] GD and see if any previously asked questions answer the question you have.

For system administrators, Server Fault was recently launched as a sister-site to Stack Overflow.

Source Code

GitHub
GitHub hosts source code for numerous open source projects and, for paying customers, private code hosting. GitHub uses git at their distributed version control system.

GitHub is useful in several ways.
1) Host open source projects for free
2) “clone” (i.e. copy) code in order to use it or if you plan on contributing to the code base
3) Private code storage for paid accounts — store all your code in one place

A few open source projects I follow on GitHub are Prototype (Javascript library), Scriptaculous (Javascript visual effects), Scripty2 (the next version of Scriptaculous), and Slicehost-DNS (a Ruby script to automatically generate DNS records for domains hosted on Slicehost).

A few good git tutorial sites if you want to start learning it: GitHub Guides, git ready, and GitCasts.

News

Hacker News
Hacker News is a Digg-like site for “hackers.” The site is run by Y Combinator, a seed-stage investment firm started by Paul Graham. It has numerous links to articles about code, languages, entrepreneurship, business, and numerous other topics.

It has been a great resource for me and has expanded my exposure to information about programming languages, source control management, entrepreneurship, and more. The resources about git referred to earlier in this post were all gleaned from HN (with the assistance of SearchYC).

Perl-specific Sites

I’ve been using both of these sites for over ten years now and they’re absolutely essential resources for Perl developers.

CPAN is the centralized repository for Perl modules. You can search it and find modules that do all kinds of things.

PerlMonks is a Perl community that helps each other with questions, has code snippets, and talks about anything and everything Perl-related.

What are your essential development resources?

As a developer, what are your essential websites and any other resources you use to make your life easier? Post them in the comments!

Getting Started With WordPress

To get started with a fresh install of WordPress 2.5.1, here is a list of some handy resources.

Initial Resources

Design Resources

Enhancing WordPress

If you need any help setting up, installing, or customizing WordPress for use as a blog or content management system for your own website, please contact me and I can provide you an estimate for the work you need completed.