[英]Svelte framework: pass environment variables to client-side bundle at runtime
我刚刚在周末制作了我的第一个Svelte应用程序,真的很喜欢这种体验。 我很好奇的一件事是,我是否能通过大量的研究无法弄清楚,是/是否可以/如何通过运行时环境变量或类似于客户端脚本的方法,因此可以在捆绑包中找到它/浏览器。 这可能不被认为是“最佳实践”,所以也许我只是一个人,但是例如在Pug中,您可以执行以下操作(例如,从Hapi.js路由处理程序执行):
const context = {
foo: bar,
baz: ''
}
return h.view('index', context)
这些变量在Pug上下文中可用。
在我的玩具应用程序中,我希望能够在服务器启动时(从.env
或CLI)传递api密钥,并像这样从Express服务器注入它: app.use(express.static(`${__dirname}/public`))
并在客户端脚本中提供该var。 同样,将api键注入客户端脚本并从那里进行调用可能不是最佳实践,但是在Svelte中这种变量传递是否可行?
似乎可以使用rollup-plugin-inject或rollup-plugin-replace来实现,但是我无法弄清楚如何使它工作。 这绝对不是对框架的批评,但是也许有关env vars的一节可能是Svelte文档的有用补充。 谢谢!
通常,这是您将在构建配置中执行的操作。 从rollupjs
标记中,我假设您正在使用它-您可以使用rollup-plugin-replace注入所需的内容:
// rollup.config.js
import replace from 'rollup-plugin-replace';
import svelte from 'rollup-plugin-svelte';
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife'
},
plugins: [
replace({
// you're right, you shouldn't be injecting this
// into a client script :)
'API_KEY': process.env.API_KEY
}),
svelte()
]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.