vite

install

nodeenv

First install nodeenv in python virtualenv, then install a specific node version

$ virtualenv nodeenv
$ cd nodeenv
$ source bin/activate
(nodeenv) $ pip3 install nodeenv
(nodeenv) $ nodeenv --version
(nodeenv) $ noveenv --list
(nodeenv) $ nodeenv --node=18.4.0 --jobs=4 node_18_4_0
(nodeenv) $ deactivate
$ cd node_18_4_0
$ source bin/activate
(node_18_4_0) $ node -v
(node_18_4_0) $ deactivate_node

svelte (+polyfills +page.js)

(node_...)$ npm init vite@latest
enter <project_name>, select 'svelte', 'svelte-ts'
(node_...)$ cd <project_name>
(node_...)$ npm install
(node_...)$ npm install vite-plugin-node-polyfills
(node_...)$ npm install page

config

svelteJS, polyfills

/vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

import { nodePolyfills } from 'vite-plugin-node-polyfills'


// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        preserveSymlinks: true
    },
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
        }
    },
    build: {
        minify: process.env.NODE_ENV === 'production' ? 'esbuild' : false,
        target: 'esnext',
        rollupOptions: {
            external: ['echarts', 'danfojs']
        }
    },
    plugins: [
        nodePolyfills({
            protocolImports: true,
        }),
        svelte()
    ]
})

In production, set minify: true
Since echarts and danfojs are pretty big libs (danfojs adds few MB to js bundle), better to load then via CDN.

minimal - web dev

library creation

vite.config.js

import path from 'path'
import { defineConfig } from "vite"


export default defineConfig({
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/main.ts'),
            name: 'easywebsocket',
            filename: (format) => `easywebsocket.${format}.js`
        }
    }
})

symlinks

If a file loaded as symlink imports a module, vite will fail on import.
config.resolve.preserveSymlinks = true will solve it, and import will succeed.

deprecated

polyfills, before Vite 4.0

(node_...)$ npm install @esbuild-plugins/node-globals-polyfill
(node_...)$ npm install @esbuild-plugins/node-modules-polyfill

/vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'


// https://vitejs.dev/config/
export default defineConfig({
  // by default base set to '/'
  base: '/path/for/url/',
  resolve: {
    alias: {
        path: 'path-browserify',
        events: 'rollup-plugin-node-polyfills/polyfills/events',
        util: 'rollup-plugin-node-polyfills/polyfills/util'
          }
      },
      optimizeDeps: {
          esbuildOptions: {
              // Node.js global to browser globalThis
              define: {
                  global: 'globalThis'
              },
              // Enable esbuild polyfill plugins
              plugins: [
                  NodeGlobalsPolyfillPlugin({
                      process: true,
                      buffer: true
                  }),
                  NodeModulesPolyfillPlugin()
              ]
          }
      },
      build: {
          rollupOptions: {
              plugins: [
                  // Enable rollup polyfills plugin
                  // used during production bundling
                  rollupNodePolyFill()
              ]
          }
      },
  plugins: [svelte()]
})