Rollup 环境变量

环境变量在开发过程中扮演着重要的角色。它们可以帮助你在不同的环境中配置应用的行为，比如开发环境和生产环境。Rollup 提供了一种机制来管理这些环境变量，使你的构建过程更加灵活和高效。

定义环境变量

在 Rollup 中，你可以通过插件来定义和使用环境变量。@rollup/plugin-replace 是一个常用的插件，可以用来替换代码中的变量。首先，你需要安装这个插件：

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

然后，在 rollup.config.js 文件中引入并配置这个插件：

// www.javascriptcn.com code example
import replace from '@rollup/plugin-replace';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

在这个例子中，我们使用了 replace 插件来替换代码中的 process.env.NODE_ENV 变量，将其设置为 'development'。这样，你就可以在代码中根据这个环境变量来决定不同的行为。

使用环境变量

在你的 JavaScript 代码中，可以通过 process.env.NODE_ENV 来访问这个环境变量。例如：

if (process.env.NODE_ENV === 'development') {
  console.log('当前是开发环境');
} else {
  console.log('当前是生产环境');
}

这段代码会根据 process.env.NODE_ENV 的值输出不同的信息。当你构建生产版本时，只需要更改插件的配置即可：

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
]

多环境支持

为了支持多种环境，你可以在 rollup.config.js 中定义多个配置对象，并根据需要选择不同的配置。例如：

// www.javascriptcn.com code example
const isProduction = process.env.NODE_ENV === 'production';

export default {
  input: 'src/main.js',
  output: {
    file: isProduction ? 'dist/bundle.min.js' : 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
    })
  ]
};

在这个例子中，我们根据 process.env.NODE_ENV 的值来动态生成输出文件名，并设置相应的环境变量。

高级用法

除了简单的字符串替换，@rollup/plugin-replace 还支持更复杂的替换逻辑。例如，你可以使用函数来进行条件判断：

replace({
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG === 'true')
})

这样，你可以在代码中使用 process.env.DEBUG 来控制调试信息的显示与否。

总结

通过使用 @rollup/plugin-replace 插件，你可以轻松地在 Rollup 中管理和使用环境变量。这不仅可以帮助你在不同环境中配置应用的行为，还可以提高代码的可维护性和灵活性。希望这些内容对你有所帮助！