sveltesvelte-3

How to differentiate between Svelte dev mode and build mode?


The dev mode using npm run dev, the release mode using npm build

How could i know that it's currently built on dev mode or not in the code, for example:

<script>
    import {onMount} from 'svelte';

    onMount(function(){
        if(DEVMODE) { // --> what's the correct one?
            console.log('this is x.svelte');
        }
    })
</script>
 

Solution

  • Not sure about the correct method. I share what I did on my project.

    1. in rollup.config.js
      import replace from "@rollup/plugin-replace";
      const production = !process.env.ROLLUP_WATCH;
      
    2. inside plugins:[ ] block add this
      replace({
          isProduction: production,
       }),
      
      rollup.config.js will look like this:
      plugins: [
        replace({
          isProduction: production,
        }),
        svelte({
          // options
        }),
      ]
      
    3. Then use isProduction inside components.
      if (!isProduction){ console.log('Developement Mode'); }