如何区分 Svelte 开发模式和构建模式？

Question

开发模式使用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>

Answer 1

不确定正确的方法。我分享我在项目中所做的事情。

在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'); }

Answer 2

如果您使用的是 sveltekit：

import { dev } from '$app/env';

if (dev) {
    //do in dev mode
}

Answer 3

我通过检查运行应用程序所在的主机名解决了这个问题。您还可以使用其他形式，例如 port 甚至 msm localStore 浏览器变量。

请注意，在使用 'window'

之前，我会在客户端检查应用程序是否为运行

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
  }
}

Answer 4

当使用 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

Answer 5

如果您将 Svelte 与 Vite 一起使用，您可以使用：

import.meta.env.DEV - 在开发环境中为真。

import.meta.env.PROD - 在生产环境中为真。

import.meta.env.MODE - 模式名称，如果您需要更多控制。

查看 Env variables

上的 Vite 文档

如何区分 Svelte 开发模式和构建模式？

How to differentiate between Svelte dev mode and build mode?

svelte

svelte-3