Use Parcel for your theme’s assets

Why?

Parcel offers a lot of benefits:

The latest JS-language-features
Your JS-assets will be transpiled to ES5 so you can use most of the latest language features without sacrificing compatibility with older browsers like Internet Explorer
Support for SCSS
SCSS will be compiled to CSS and prefixed to support a wide range of browsers
Shorter load times
Your JS and CSS-assets will be minified merged into one file each so there are fewer and smaller requests to display your site
Automatic Cache-Management
All files will include their hash in their filename so you can set the cache duration to a very high value

How does it work?

Your source files should be placed inside the folder “src”

yarn start
This will start parcel and compile your assets to dev. Parcel will also watch for file changes and immediately recompile your assets. Your files will not be minified to make debugging easier.
yarn build
Compiles all assets to dist. These assets will be minified and optimized for a production environment.

Which assets will be loaded?

If you enable WP_DEBUG the assets will be loaded from dev. Otherwise they will be loaded from dist. This way no unoptimized code will be loaded in your production environment.

Setup

Inside your theme’s folder run the following commands

npm init
yarn add -D parcel parcel-bundler parcel-plugin-assets-list sass

Add the following scripts to your package.json

package.json

json

{
  "scripts": {
    "start": "rm -rf .cache && rm -rf dev && parcel src/parcel.urls --no-hmr --out-dir dev --public-url ./",
    "build": "rm -rf .cache && rm -rf dist && parcel build src/parcel.urls --out-dir dist --public-url ./"
  },
  "alias": {
    "jquery": "./src/jquery.js"
  }
}

Create these files inside your theme’s directory

src
- backend
  - js
    - main.js (leer)
  - scss
    - main.scss (leer)
- frontend
  - js
    - main.js (leer)
  - scss
    - main.scss (leer)
- jquery.js
- parcel.urls

jquery.js

javascript

// This file will ensure that parcel doesn't bundle it's
// own version of jQuery and your JS uses WordPress' 
// default jQuery

module.exports = window.jQuery;

parcel.urls

# Frontend
backendJS: backend/js/main.js
backendCSS: backend/scss/main.scss

# Backend
frontendJS: frontend/js/main.js
frontendCSS: frontend/scss/main.scss

functions.php

php

<?php
// This code enqeues the assets that parcel generates
// for front- and backend

function parcel_assets_path($filename = '', $public = false)
{
  $base = $public ? get_template_directory_uri() : get_stylesheet_directory();
  return $base . '/' . (WP_DEBUG ? 'dev' : 'dist') . '/' . $filename;
}

function parcel_enqueue_resource($name, ...$args)
{
  $jsonFileName = parcel_assets_path('parcel.json');
  if (!is_readable($jsonFileName)) {
    wp_die('I did not find /' . $jsonFileName . ', did you run <b>yarn install</b> && <b>yarn ' . (WP_DEBUG ? 'start' : 'build') . '</b>?');
  }
  $assets = json_decode(file_get_contents($jsonFileName));
  if (!property_exists($assets, $name)) return;
  $uri = parcel_assets_path($assets->$name, true);
  if (substr($uri, -3, 3) === 'css') {
    wp_enqueue_style($name, $uri, ...$args);
  } else {
    wp_enqueue_script($name, $uri, ...$args);
    wp_localize_script($name, $name . '_parcel', ['baseUrl' => parcel_assets_path('', true)]);
  }
}

add_action('wp_enqueue_scripts', function () {
  parcel_enqueue_resource('frontendCSS');
  parcel_enqueue_resource('frontendJS', ['jquery'], null, true);
});

add_action('admin_enqueue_scripts', function () {
  parcel_enqueue_resource('backendCSS');
  parcel_enqueue_resource('backendJS', ['jquery'], null, true);
});

Comments

Post-Meta

Published: July 14, 2019
Last modified: February 29, 2020

Included files

functions.php
jquery.js
package.json
parcel.urls
readme.md

Download all

Don't know where to look?