Babel Explained — Day 13 (JavaScript for WordPress)

Babel is a JavaScript compiler that converts modern JavaScript (ES6+) into backward-compatible JavaScript (ES5). This ensures compatibility across a wide range of browsers, including legacy ones like Internet Explorer 11, which is critical for WordPress themes and plugins serving diverse user bases.

Why Babel Matters for WordPress Developers

WordPress powers sites accessed by users on various browsers, from modern Chrome to older systems. When developing custom themes, plugins, or Gutenberg blocks, Babel enables developers to:

• Write modern JavaScript (e.g., arrow functions, classes, import statements, async/await) for improved productivity and code clarity.
• Ensure compatibility with older browsers by transpiling modern code into widely supported ES5.

Example

Without Babel (ES6+ code):

const greet = () => console.log('Hello, World!');

Older browsers may fail to parse this.

With Babel (transpiled to ES5):

var greet = function() { console.log('Hello, World!'); };

Compatible with virtually all browsers.

Integrating Babel into a WordPress Workflow

Babel is commonly paired with Webpack in WordPress development, particularly for:

• Gutenberg block development using @wordpress/scripts.
• Custom themes or plugins leveraging modern JavaScript.
• Headless WordPress setups requiring optimized front-end code.

Setup Overview

1. Install Dependencies:

   npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

2. Configure Babel (babel.config.js or .babelrc):

   module.exports = {
     presets: [
       [
         '@babel/preset-env',
         {
           targets: {
             browsers: ['> 1%', 'last 2 versions', 'ie >= 11'],
           },
         },
       ],
     ],
   };

The @babel/preset-env preset automatically determines necessary transformations based on your target browsers.

3. Configure Webpack (webpack.config.js):

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: 'babel-loader',
         },
       ],
     },
   };

4. Write Modern JavaScript:

   import { __ } from '@wordpress/i18n';

   const MyComponent = () => {
     console.log(__('Hello from a Gutenberg block!', 'text-domain'));
   };

Babel ensures this code is transpiled for broad compatibility.

Practical Application: Gutenberg Blocks

The @wordpress/scripts package, commonly used for Gutenberg block development, leverages Babel and Webpack to:

• Transpile ES6+ and JSX into browser-compatible JavaScript.
• Bundle assets into a single file (e.g., /build/index.js).
• Allow developers to enqueue the resulting script in WordPress:

   wp_enqueue_script(
     'my-block',
     plugins_url('build/index.js', __FILE__),
     ['wp-blocks', 'wp-element', 'wp-editor'],
     filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
   );

Key Benefits for WordPress Development

Feature	Benefit
JavaScript Transpilation	Write modern ES6+ code while supporting legacy browsers.
Integration with Webpack	Streamline asset bundling for themes, plugins, or blocks.
Used in @wordpress/scripts	Simplifies Gutenberg block development with preconfigured tools.
Customizable Configuration	Target specific browsers via .babelrc or babel.config.js.