1. rollup-plugin-replace
[![](https://img.shields.io/npm/v/rollup-plugin-replace.svg?style=flat)](https://www.npmjs.com/package/rollup-plugin-replace)
rollup-plugin-replace
Package: rollup-plugin-replace
Created by: rollup
Last modified: Sun, 26 Jun 2022 14:01:26 GMT
Version: 2.2.0
License: MIT
Downloads: 401,910
Repository: https://github.com/rollup/rollup-plugin-replace

Install

npm install rollup-plugin-replace
yarn add rollup-plugin-replace

rollup-plugin-replace

Replace strings in files while bundling them.

Installation

 npm install --save-dev rollup-plugin-replace

Usage

Generally, you need to ensure that rollup-plugin-replace goes before other things (like rollup-plugin-commonjs) in your plugins array, so that those plugins can apply any optimisations such as dead code removal.

 // rollup.config.js
import replace from 'rollup-plugin-replace';

export default {
  // ...
  plugins: [
    replace({
      ENVIRONMENT: JSON.stringify('production')
    })
  ]
};

Options

 {
  // a minimatch pattern, or array of patterns, of files that
  // should be processed by this plugin (if omitted, all files
  // are included by default)...
  include: 'config.js',

  // ...and those that shouldn't, if `include` is otherwise
  // too permissive
  exclude: 'node_modules/**',

  // To replace every occurrence of `<@foo@>` instead of every
  // occurrence of `foo`, supply delimiters
  delimiters: ['<@', '@>'],

  // All other options are treated as `string: replacement`
  // replacers...
  VERSION: '1.0.0',
  ENVIRONMENT: JSON.stringify('development'),

  // or `string: (id) => replacement` functions...
  __dirname: (id) => `'${path.dirname(id)}'`,

  // ...unless you want to be careful about separating
  // values from other options, in which case you can:
  values: {
    VERSION: '1.0.0',
    ENVIRONMENT: JSON.stringify('development')
  }
}

Word boundaries

By default, values will only match if they are surrounded by word boundaries — i.e. with options like this...

 {
  changed: 'replaced'
}

...and code like this...

 console.log('changed');
console.log('unchanged');

...the result will be this:

 console.log('replaced');
console.log('unchanged');

If that's not what you want, specify empty strings as delimiters:

 {
  changed: 'replaced',
  delimiters: ['', '']
}

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin