svelte + rollup 中的环境变量

Question

我正在寻找一种简单的方法来设置环境。IE 如果我可以运行npm run dev:local并npm run dev:staging加载不同的环境文件，这些文件可以在运行时通过process.env. 据了解，它是编译的，因此我可能必须以不同的方式访问变量。我直接从 sveltejs/template 使用 svelte 和 rollup。这应该很简单，但我看不出有什么办法。虽然很麻烦，但是用 webpack 可以做到。有没有一种简单的方法可以做到这一点？

Answer 1

您可以使用@rollup/plugin-replace在编译代码中注入构建时间常量。

像这样的东西：

rollup.config.js

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

const production = !process.env.ROLLUP_WATCH

export default {
  ...
  plugins: [
    replace({
      'process.env': production ? '"production"' : '"dev"',
    }),
    ...
  ]
}

请注意值的双引号：'"production"'。该插件按代码中的方式注入字符串，因此，如果您想要字符串，则需要在引号中加上引号。

另外，正如插件文档中提到的，它应该放在插件数组的开头，以实现优化，例如由其后面的其他插件淘汰死代码。