Nearly Pure Mustard

    rollup-plugin-replace-html-vars

    1.0.3 • Public • Published

    Replace variables in HTML with rollup

    A rollup.js plugin to replace variables in html files during the build process, based on replace-in-file. Make a single replacement or multiple replacements at once.

    Installation

    # Using npm 
    npm install rollup-plugin-replace-html-vars --save-dev
     
    # Using yarn 
    yarn add rollup-plugin-replace-html-vars

    Simple example

    Replace first occurrence only:

    // Import the plugin
    import replaceHtmlVars from 'rollup-plugin-replace-html-vars';
     
    // Load the library and specify options
    // rollup.js configuration
    ...
    plugins: [
        // Place at the end of your rollup plugin section
        // Any string is fine as variable,
        // here we use _THIS_IS_THE_VARIABLE_
        replaceHtmlVars({
            files: 'path/to/files/example.html',
            from: '_THIS_IS_THE_VARIABLE_',
            to: '1.0.0',
        })
    ]
    // Use in example.html
    <p>Current version: _THIS_IS_THE_VARIABLE_</p>
    // Results in value of options.to, here '1.0.0'
    <p>Current version: 1.0.0</p>

    Replace multiple variables

    Replace first occurrence only:

    // Import the plugin
    import replaceHtmlVars from 'rollup-plugin-replace-html-vars';
     
    // Load the library and specify options
    // rollup.js configuration
    ...
    plugins: [
        // Place at the end of your rollup plugin section
        // Any string is fine as variable
        replaceHtmlVars({
            files: 'path/to/files/example.html',
            from: ['FIRST_VARIABLE', 'second-variable'],
            to: ['Number one', 'Only second'],
        })
    ]
    // Use in example.html
    <p>Jane Doe is: FIRST_VARIABLE</p>
    <p>John Doe is: second-variable</p>
    // Results in value of options.to, here '1.0.0'
    <p>Jane Doe is: Number one</p>
    <p>John Doe is: Only second</p>

    Regular expressions and easy cache-buster

    Replace all occurrences of ${timestamp} in your code, a simple way to create a cache-buster with rollup.js:

    // Import the plugin
    import replaceHtmlVars from 'rollup-plugin-replace-html-vars';
     
    // Load the library and specify options
    // rollup.js configuration
    ...
    plugins: [
        // Place at the end of your rollup plugin section
        // Any string is fine as variable, here we use ${timestamp}
        replaceHtmlVars({
            files: 'path/to/files/*.html',
            from: /\${timestamp}/g,
            to: Date.now(),
        })
    ]
    // Use in an array of html files
    <link rel="stylesheet" type="text/css" href="static/bundle.css?t=${timestamp}" />
    <script src="static/bundle.js?t=${timestamp}"></script>
    // Results in options.to, in this example Date.now()
    <link rel="stylesheet" type="text/css" href="static/bundle.css?t=1510343208773" />
    <script src="static/bundle.js?t=1510343208773"></script>

    More Options

    rollup-plugin-replace-html-vars is a plugin for rollup.js which wraps replace-in-file. All options of replace-in-file are available for rollup-plugin-replace-html-vars.

    License

    (MIT License)

    Copyright 2017, Andreas Jacob

    Install

    npm i rollup-plugin-replace-html-vars

    DownloadsWeekly Downloads

    552

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • cordobo