DEV Community

Logan-Ward
Logan-Ward

Posted on

Templating JS Projects With MRM

Preface

Purpose

Mrmjs is a templating tool for setting up JavaScript applications by generating various config files according to preset specifications. This is accomplished by running either pre-made or custom tasks for each dependency in the application that requires a specific config file. Before that though, we will need to install mrm.

Installation

The command to install mrm globally is as follows:
npm install -g mrm
To prepare to create custom tasks to generate config files, navigate to your home directory. Create a directory called ".mrm". Navigate into that folder, create a file called "config.json", then run this command:
npm install mrm-core
After following those steps, you are ready to start running pre-made tasks and creating tasks of your own, as outlined below.

Implementation

Pre-Made Tasks

Mrm comes with a set of pre-made tasks that the tool is commonly used for. For example, it has a task to generate a .eslintrc file, another task for creating a package.json file, and plenty more. These tasks can be found on their website, and they can be run from the project's directory as shown:
mrm <taskname>
Replace <taskname>with the name of the task you intend to run. If you want more detailed control of how your config files will be generated, then read on to learn about creating custom tasks with mrm-core.

Customizing Tasks

Often when a developer starts expanding their toolset of linters, loaders, builders, etc they will start developing preferences and specific settings they always use when developing an application from scratch. Mrm-core is a library that lets you create tasks that will create almost anything you want on command. To create a task, first go into your .mrm directory you created then make a new directory named after your task you want to create. Inside the new directory create an index.js file. Inside that file you will use the mrm-core library to customize your task. Since there are a few different file types you can make, the below example will be an example of one of the most common file types for configs, .json.

Example

To demonstrate how to create a custom task, here I will show you a customized eslint task named eslintairbnb.

// in the index.js file of the eslintairbnb directory
// import the mrm-core tools you need for the task
// json will help with creating .eslintrc and lines will be used to create .eslintignore
const { json, lines } = require('mrm-core');
// export the task
module.exports = function eslintAirBnb() {
  // create the json file
  json('.eslintrc')
  // use .set to create the json object (you can use merge to update an existing object instead)
  .set({
    // add your preferred eslint settings
    "extends": ["eslint:recommended", "airbnb", "airbnb/hooks"],

    "env": {

      "es6": true,

      "browser": true

    },

    "parserOptions": {

      "sourceType": "module",

      "ecmaVersion": 9,

      "ecmaFeatures": {

        "jsx": true

      }

    },

    "rules": {

      "import/extensions": ["warn", "always", {"ignorePackages": true}],

      "no-unused-vars": ["warn", { "vars": "local", "args": "after-used", "ignoreRestSiblings": false }],

      "no-use-before-define": ["off"],

      "no-shadow": ["off"]

    }

  })
  // save the new file
  .save();
  // while we are at it lets make a .eslintignore file
  lines('.eslintignore')

  .add([

    '**/.eslint*',

    '**/.vscode',

    '**/node_modules',

    '**/dist'

  ])

  .save();

};
Enter fullscreen mode Exit fullscreen mode

Summary

Ultimately, the value of Mrm will come down to how often you are spinning up new JavaScript applications. If you have found yourself creating the same files, tweaking the same configs, and templating the same file trees consistently, then consider giving Mrm a try. The initial investment to setup the tasks will easily outweigh the time saved in future applications.

Top comments (0)