Rollup Env Config Multi-Env Build

Rollup supports dynamically managing environment variables through configuration files. Developers can define variables for different environments using rollup.config.js or rollup.config.{env}.js files. For example:

• Development Environment: Use process.env.DEV_MODE === 'true' to determine if development mode is enabled.
• Test Environment: Control test logic via process.env.TEST_MODE === 'true'.
• Production Environment: Trigger production optimizations using process.env.PROD_MODE === 'true'.

Environment variables can be accessed directly through process.env, for example:

// rollup.config.dev.js  
export default {
  // ...  
  onwarn(error, { template }) {
    if (process.env.DEV_MODE) {
      console.warn(error);
    }
    return template(error);
  },
};

Developers can separate environment variables into .env files and load them using dotenv, for example:

# .env.dev  
DEV_MODE=true  
# .env.prod  
PROD_MODE=true  

Multi-Environment Build Strategies

Rollup supports distinguishing different environments through build commands and configuration files, ensuring flexibility in the build process:

1. Build Command Distinction
   Use rollup -c to specify a configuration file, for example:

   # Development build  
   rollup -c rollup.config.dev.js  
   # Production build  
   rollup -c rollup.config.prod.js  
   

   Each configuration file contains variable definitions corresponding to its environment, such as:

   // rollup.config.prod.js  
   export default {
     plugins: [
       require('unplugin-auto-import')({
         importMap: require('./import-map.json'),
       }),
       require('unplugin-auto-import')({
         importMap: require('./import-map.json'),
         mode: 'production',
       }),
     ],
     output: {
       dir: 'dist',
       format: 'esm',
       sourcemap: process.env.PROD_MODE,
     },
   };
   

2. Dynamic Configuration Loading
   Switch configurations dynamically via process.env, for example:

   // rollup.config.js  
   export default {
     plugins: [
       require('unplugin-auto-import')({
         importMap: process.env.ENV === 'dev' ? require('./import-map.dev') : require('./import-map.prod'),
       }),
     ],
     output: {
       dir: 'dist',
       format: process.env.ENV === 'prod' ? 'cjs' : 'esm',
     },
   };
   

   During the build, the corresponding import map and output format are selected based on environment variables.
3. CI/CD Pipeline Integration
   In continuous integration, the build process can be controlled via environment variables:
   • GitHub Actions:

     jobs:
       build:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v4
           - name: Set environment
             uses: actions/electron-env@v2
             with:
               env: ${{ params.env }}
           - name: Build
             uses: rollup/actions/build@v2
             with:
               config: ${{ params.config }}
     

   • GitLab CI:

     build:
       script:
         - npm install
         - if [[ "$CI_ENVIRONMENT_NAME" == "production" ]]; then npm run build:prod; else npm run build:dev; fi
     

Configuration Management Best Practices

• Environment Isolation: Separate configuration files for different environments to avoid polluting global variables.
• Version Control: Include environment variable configurations in the version control system (e.g., git add .env).
• Security Hardening: Disable debug outputs in development mode, such as:

  if (process.env.DEV_MODE) {
    console.error('⚠️ Dev mode is enabled. Debug outputs are disabled.');
  }
  

• Dynamic Loading: Implement on-demand configuration loading via rollup.config.{env}.js to reduce the number of files during the build.

Code Examples

// rollup.config.dev.js  
export default {
  plugins: [
    require('unplugin-auto-import')({
      importMap: require('./import-map.dev'),
    }),
  ],
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: process.env.DEV_MODE,
  },
};

// rollup.config.prod.js  
export default {
  plugins: [
    require('unplugin-auto-import')({
      importMap: require('./import-map.prod'),
      mode: 'production',
    }),
  ],
  output: {
    dir: 'dist',
    format: 'cjs',
    sourcemap: process.env.PROD_MODE,
  },
};

Summary

Rollup achieves flexible build strategies through environment variable configuration. Developers can load configuration files for different environments as needed, ensuring maintainability and security of the build process. Proper management of environment variables and configuration files can significantly improve build efficiency and code quality.