ভিট জেএস

নতুন ভিট প্রজেক্ট বানানো

npm create vite@latest

yarn create vite

pnpm create vite

প্রজেক্ট রান করে দেখুন

npm run dev

yarn run dev

pnpm run dev

প্লাগিন ইন্সটল করা

npm add -D @vitejs/plugin-legacy

// vite.config.js

import legacy from '@vitejs/plugin-legacy' 
import { defineConfig } from 'vite' 

export default defineConfig({ 
  plugins: [ 
    legacy({ 
      targets: ['defaults', 'not IE 11']
    })
  ]
})

প্লাগিন অর্ডারিং (pre এবং post)

// vite.config.js 

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({ 
  plugins: [ 
    { 
      ...image(),
      enforce: 'pre'
    }
  ]
})

কন্ডিশনাল প্লাগিন ব্যবহার (build এবং serve)

// vite.config.js 

import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({ 
  plugins: [ 
    { 
      ...typescript2(),
      apply: 'build'
    }
  ]
})

ন্যাটিভ ES5 সাপোর্ট

import { someMethod } from 'my-dep'

jsx, tsx সাপোর্ট

// vite.config.js 

import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

স্ট্যাটিক আসেট

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

JSON (জেসন)

import json from './example.json'

import { field } from './example.json'

গ্লোবাল ইম্পোর্ট

const modules = import.meta.glob('./dir/*.js')

// code produced by vite 
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js')
}

মাল্টি লাইন প্যাটার্ন

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

নেগেটিভ প্যাটার্ন

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])

নেইমড প্যাটার্ন

const modules = import.meta.glob('./dir/*.js', { import: 'setup' })

ডাইনামিক ইম্পোর্ট

const module = await import(`./dir/${file}.js`)

ওয়েব অ্যাসেম্বলি

import init from './example.wasm?init'

init().then((instance) => { 
  instance.exports.test()
})