如何在本地Svelte组件中使用及替换env环境变量？

首先你需要在rollup.config.js中加载.env文件的配置，再正确配置@rollup/plugin-replace的替换规则即可解决问题：

1. 先安装dotenv依赖

npm install dotenv --save-dev

2. 调整rollup.config.js的配置，在文件最顶部引入dotenv并加载.env配置，同时修改replace插件的参数：

// 顶部新增这两行
import dotenv from 'dotenv'
dotenv.config()

export default [{
...
    plugins: [
    replace({
      preventAssignment: true,
      // 注意要给值包裹一层引号，不然替换后会被识别为变量而非字符串
      'GRAPHQL_URL': JSON.stringify(process.env.GRAPHQL_URL)
    }),
    // 注意replace插件要放在svelte插件之前执行，保证组件代码编译前就完成替换
    svelte({...}),
...
]

3. 如果还是有process未定义的报错，可以在replace配置里新增全局process变量的兜底替换，避免第三方依赖调用process造成的报错：

replace({
  preventAssignment: true,
  'GRAPHQL_URL': JSON.stringify(process.env.GRAPHQL_URL),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})

修改完成后重启开发服务即可，此时Svelte组件中直接调用GRAPHQL_URL就能拿到正确的字符串值。

内容的提问来源于stack exchange，提问作者Jean D.