如何区分 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 开发模式和构建模式?的主要内容,如果未能解决你的问题,请参考以下文章

生产构建后忽略组件样式

构建之法第五章团队和流程

2017090-构建之法:现代软件工程-阅读笔记

到底如何区分什么是架构框架模式和平台 ?

构建之法阅读心得

Doctype作用?严格模式与混杂模式如何区分?它们有何差异?