Creating a simple babel plugin1 min read

What will it do?

It will change this

let content = include_str(‘path to text file’);

to this

let content = ‘content of text file’;

It works just like the rust-lang include_str!() macro.

Code

• While looping through the AST, our code checks for a function call (CallExpression ) named include_str
• If one is found, we derive the required file path from the first argument to the call and the path of the file that is being transpiled
• Contents of the file are read into a string with fs.readFIleSync
• The CallExpression  is replaced with the string which is converted into a stringLiteral

index.js

const fs = require('fs');
const Path = require('path');

module.exports = function MyPlugin(ref) {
    var t = ref.types;
    return {
        visitor: {
            CallExpression: {
                enter: function (path) {
                    if (t.isCallExpression(path.node) && path.node.callee.name === 'include_str') {
                        let file_name = this.file.hub.file.opts.filename;
                        let fpath = Path.join(Path.dirname(file_name), path.node.arguments[0].value);
                        let content = fs.readFileSync(fpath, 'UTF-8');
                        path.replaceWith(t.stringLiteral(content));
                    }
                }
            }
        }
    };
};

 

Disclaimer

Not tested

Similar libs to check out

• babel-include-html – includes minified HTML as string
• babel-include-scss : processes scss to minified css and includes it as string