Compiling CSS and Javascript with wp-scripts

Ever since the appearance of Gutenberg, or probably before, several official WordPress packages have been implemented to make our lives as developers easier, so to speak.

One of them, and probably one of the most used by us as Frontend Developers is @wordpress/wp-scripts which serves us to compile Javascript and CSS within our project, and in this small tutorial I will cover the basics to be able to use it quickly.

#What is wp-scripts?

In basic terms, it is nothing more than a collection of resources specifically designed for frontend development, each with its recommended configuration, contains among other things:

• Compiler
• Linter
• Format
• Packer
• Tests
• Local environment

#Installation

To start, we require a simple ppm type package in which we will define our application, for the purposes of this tutorial we don't need much, we can simply run npm init and follow the instructions in the terminal.

package.json

1{
2  "name": "scripts",
3  "version": "1.0.0",
4  "description": "Simple @wordpress/scripts tutorial",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1"
8  },
9  "author": "Mario Aguiar",
10  "license": "ISC",
11  "devDependencies": {
12    "@wordpress/scripts": "^18.0.1"
13  }
14}
15

#Hello World

Before we start creating and compiling our files it is necessary that we have an environment from which to run our application, fortunately, the scripts package already comes with one, to use it we just need to add it to our list of scripts in our package.json, like this:

package.json

1{
2  "name": "scripts",
3  "version": "1.0.0",
4  "description": "Simple @wordpress/scripts tutorial",
5  "main": "index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    "start": "wp-scripts start"
9  },
10  "author": "Mario Aguiar",
11  "license": "ISC",
12  "devDependencies": {
13    "@wordpress/scripts": "^18.0.1"
14  }
15}
16

Now we just need to run it with npm run start or npm start

This will create an observer in our terminal, which will update and collect all our files when a change is detected, now we can start with our application.

The default configuration will look for our files within src/index.js, so we can start there.

index.js

1import { __ } from '@wordpress/i18n';
2const init = () => {
3  console.log(__('Hello World'));
4};
5init();
6

Now when we look inside our build directory we can see the compiled files, along with their sourcemap. The index.asset.php file is a very useful file that is created every time any of the dependencies change, they are listed in it so that our application can easily list them within our plugin, for example:

plugin.php

1/**
2 * Include scripts and dependencies in our plugin
3 *
4 * @return void
5 */
6function enqueue_scripts() {
7    $asset = include get_stylesheet_directory() . '/build/index.asset.php';
8    wp_enqueue_script(
9        'mah-scripts',
10        get_stylesheet_directory_uri() . '/build/index.js',
11        $asset['dependencies'],
12        $asset['version'],
13        true
14    );
15}
16

#Conclusion

At a time when project configuration is probably one of the most complicated things and the most important at the same time, it is good to know that we have tools that make our lives a little easier, at least for now.

#Resources

• Official Docs