javascript - svelte + rollup 中的环境变量

Question

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

Answer 1

您可以使用 @rollup/plugin-replace 在编译后的代码中注入(inject)构建时间常量。 .
像这样的东西: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"' .该插件按代码中的原样注入(inject)字符串，因此，如果您想要一个字符串，则需要引号中的引号。
此外，正如插件文档中所提到的，它应该放在插件数组的开头，以启用优化，例如通过它后面的其他插件抖掉死代码。