如何区分 Svelte 开发模式和构建模式?
Posted
技术标签:
【中文标题】如何区分 Svelte 开发模式和构建模式?【英文标题】:How to differentiate between Svelte dev mode and build mode? 【发布时间】:2021-01-22 11:27:47 【问题描述】:开发模式使用npm run dev
,发布模式使用npm build
我怎么知道它当前是在开发模式下构建还是不在代码中,例如:
<script>
import onMount from 'svelte';
onMount(function()
if(DEVMODE) // --> what's the correct one?
console.log('this is x.svelte');
)
</script>
【问题讨论】:
【参考方案1】:当使用 Svelte(不是 svelte-kit)时,这对我在 svelte 组件中有效:
<script>
let isProduction = import.meta.env.MODE === 'production';
if (!isProduction)
console.log("Developement Mode");
else
console.log("Production Mode");
</script>
Thanks timdeschryver for the reference
【讨论】:
【参考方案2】:我通过检查运行应用程序的主机名解决了这个问题。 您还可以使用其他形式,例如,端口甚至 msm 一个 localStore 浏览器变量。
请注意,在使用“窗口”之前,我会检查应用程序是否在客户端运行
const isProduction = (): boolean =>
// Check if is client side
if (typeof window !== 'undefined' && window.document !== undefined)
// check production hostname
if (window?.location.hostname !== undefined &&
window.location.hostname === 'YOUR_PRODUCTION_HOSTNAME')
return true
else
return false
else
return false
【讨论】:
【参考方案3】:如果您使用的是 sveltekit:
import dev from '$app/env';
if (dev)
//do in dev mode
【讨论】:
【参考方案4】:不确定正确的方法。我分享我在项目中所做的事情。
-
在
rollup.config.js
import replace from "@rollup/plugin-replace"; const production = !process.env.ROLLUP_WATCH;
-
在
plugins:[ ]
块内添加这个
replace( isProduction: production, ),
rollup.config.js 将如下所示。
,
plugins: [
replace(
isProduction: production,
),
svelte(
-
然后在组件内部使用
isProduction
。
if (!isProduction) console.log('Developement Mode');
【讨论】:
我必须导入什么才能访问纤细组件中的“isProduction”?因为当我按照您描述的方式进行操作时,我得到一个 ReferenceError: isProduction is not defined..isProduction ? "Production Mode" : "Development Mode"
适合我。以上是关于如何区分 Svelte 开发模式和构建模式?的主要内容,如果未能解决你的问题,请参考以下文章