Working with YAML

YAML is a common framework that is used in a similar way to JSON. The difference is that YAML is more commonly used with configuration files, which is why you may encounter it more frequently, or for the first time, when using Webpack.

To use YAML with Webpack, we must install it. Let's get started:

You can install YAML using npm in your command-line utility. Use the following command:

yarn add js-yaml-loader

Note the yarn statement. This refers to an open source package manager for JavaScript files that comes preinstalled with Node.js. It works similarly to npm and should be preinstalled. If you don't get a response from the code used here, then double-check that it is preinstalled.

To inspect your YAML files from the command-line interface, you should install them globally:

npm install -g js-yaml

Next, open up the configuration file, webpack.config.js, and make the following amendments:

import doc from 'js-yaml-loader!./file.yml';

The preceding line will return a JavaScript object. This method is safe for data that is not trusted. See the Further reading section for a GitHub YAML example.

After that, use webpack.config.js to configure the file to allow the use of the YAML loader:

module: {
    rules: [{
    test: /.yaml$/,
    use: 'js-yaml-loader',
    }]
}

You may also want to use the YAML front-matter loader for Webpack. This is an MIT-licensed piece of software that will convert YAML files into JSON, which will be particularly useful if you are more used to using the latter. If you are a JavaScript developer, it is quite likely that you are used to using JSON as it tends to be more commonly used with JavaScripters than YAML.

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0 installed on your device. Webpack 5 is the subject of this guide, so there should be no trouble there. However, note that this feature is only available with Webpack 4 and 5.

The following steps are separated from the previous steps as they deal with the installation of yaml-loader and not yaml-frontmatter, which is used to convert YAML into JSON files (which is more typical of Webpack package structures):

To begin, you'll need to install yaml-frontmatter-loader using your command-line utility:

npm install yaml-frontmatter-loader --save-dev

This particular command line may be syntactically different from the kind that this guide has shown in the past, but regardless of the format, this command should work.

Then, add the loader to your configuration, as follows:

const json = require('yaml-frontmatter-loader!./file.md');

This code will return the file.md file as a JavaScript object.

Next, open webpack.config.js once more and make the following changes to the rules key, ensuring you reference the YAML loader:

module.exports = {
  module: {
    rules: [
      {
         test: /.md$/,
         use: [ 'json-loader', 'yaml-frontmatter-loader' ]
      }
    ]
  }
}

Next, run Webpack 5 via your preferred method and see the results!

If you got through that in one piece, you may be feeling brave enough to tackle Angular. That is a more difficult framework to work with, so let's get started.

Table of Contents for Working with YAML

Create new playlist

Sign In

Sign Up

Table of Contents for
Working with YAML