Here, we’ll discuss how to implement environment-specific configurations with Rollup.js to easily switch between different configurations.

Step 1: Create Configuration Files

Firstly, create separate configuration files for each environment. For example, you can have config.dev.js for development, config.test.js for testing, and config.prod.js for production.

In each configuration file, define the specific values for that environment. For instance, you may have different API endpoints, logging levels, or other environment-specific settings.

// config.dev.js
export default {
  apiUrl: 'http://localhost:3000',
  logLevel: 'debug'
};

// config.test.js
export default {
  apiUrl: 'https://testapi.example.com',
  logLevel: 'info'
};

// config.prod.js
export default {
  apiUrl: 'https://api.example.com',
  logLevel: 'error'
};

Step 2: Import and Use the Configuration

In the code where you need to access the environment-specific configuration, import the relevant configuration file using Rollup’s replace plugin.

First, install the @rollup/plugin-replace plugin:

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

Then, add the plugin to your Rollup configuration file (usually rollup.config.js):

import replace from '@rollup/plugin-replace';

export default {
  // ... rest of the Rollup config
  
  plugins: [
    // ... other plugins
    
    replace({
      __CONFIG_ENV__: JSON.stringify(process.env.NODE_ENV) // Define the environment variable
    })
  ]
};

In your code, import the configuration based on the __CONFIG_ENV__ variable:

// main.js
import config from './config/__CONFIG_ENV__.js';
console.log(config.apiUrl);
console.log(config.logLevel);

Ensure that the __CONFIG_ENV__ placeholder is replaced with the appropriate environment name during the build process.

Step 3: Build and Test

To build your application with specific configurations, set the environment variable before running the build command. For example:

# Development
NODE_ENV=dev rollup -c

# Test
NODE_ENV=test rollup -c

# Production
NODE_ENV=production rollup -c

As you build your project, Rollup will replace __CONFIG_ENV__ with the defined environment value, resulting in the correct configuration being imported and used.

Conclusion

By implementing environment-specific configurations with Rollup.js, you can easily switch between different configuration values for development, testing, and production environments. This allows you to manage and optimize your application’s behavior in each environment without duplicating code or creating complex workarounds. #RollupJS #JavaScript