Viteでnpmライブラリを作る方法と、自作したUtilityスクリプト集「umaki」の使い方の宣伝

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      dts()
    ],
    ...
  }
})

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

 // isProduction
 const isProduction = process.env.NODE_ENV === 'production'

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      dts()
    ],
   esbuild: isProduction
     ? {
         drop: ['debugger'],
         pure: [
           'console.log',
           'console.info',
           'console.table',
           'console.time',
           'console.timeEnd',
           'console.trace'
         ]
       }
     : {},
  }
})

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

// isProduction
const isProduction = process.env.NODE_ENV === 'production'

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      dts()
    ],
    esbuild: isProduction
      ? {
          drop: ['debugger'],
          pure: [
            'console.log',
            'console.info',
            'console.table',
            'console.time',
            'console.timeEnd',
            'console.trace'
          ]
        }
      : {},
   build: {
     lib: {
       entry: './src/index.ts',
       name: 'foobar',
       fileName: (format) => `index.${format}.js`
     },
     rollupOptions: {
       output: [
         {
           format: 'es',
           preserveModules: true,
           preserveModulesRoot: 'src',
           entryFileNames: ({ name: fileName }) => {
             return `${fileName}.es.js`
           },
           exports: 'named',
         },
         {
           format: 'cjs',
           preserveModules: true,
           preserveModulesRoot: 'src',
           entryFileNames: ({ name: fileName }) => {
             return `${fileName}.cjs.js`
           },
           exports: 'named',
         }
       ]
     }
   }
  }
})

 import * as path from 'node:path'
 import license from 'rollup-plugin-license'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
 import packageJson from './package.json'

// isProduction
const isProduction = process.env.NODE_ENV === 'production'

 // banner
 const banner = `/*!
  * name: ${packageJson.name}
  * version: v${packageJson.version}
  * description: ${packageJson.description}
  * author: ${packageJson.author}
  * homepage: ${packageJson.homepage}
  * Released under the ${packageJson.license} License
  *
  * This software includes dependencies licensed under MIT, ISC, BSD-3-Clause, and Apache-2.0.
  * For license information, please see LICENSE.txt
  */
 `

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      dts(),
     license({
       sourcemap: true,
       thirdParty: {
         output: path.join(__dirname, 'dist/LICENSE.txt')
       }
     })
    ],
    esbuild: isProduction
      ? {
          drop: ['debugger'],
          pure: [
            'console.log',
            'console.info',
            'console.table',
            'console.time',
            'console.timeEnd',
            'console.trace'
          ]
        }
      : {},
    build: {
      lib: {
        entry: './src/index.ts',
        name: 'foobar',
        fileName: (format) => `index.${format}.js`
      },
      rollupOptions: {
        output: [
          {
            format: 'es',
            preserveModules: true,
            preserveModulesRoot: 'src',
            entryFileNames: ({ name: fileName }) => {
              return `${fileName}.es.js`
            },
            exports: 'named',
           banner
          },
          {
            format: 'cjs',
            preserveModules: true,
            preserveModulesRoot: 'src',
            entryFileNames: ({ name: fileName }) => {
              return `${fileName}.cjs.js`
            },
            exports: 'named',
           banner
          }
        ]
      }
    }
  }
})

...省略
export default defineConfig(({ mode }) => {
  return {
    ...省略
    build: {
      ...省略
      rollupOptions: {
        ...省略
       external: [
         'dayjs'
       ],
      }
    }
  }
})

...省略
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  return {
    ...省略
    test: {
      globals: true,
      environment: 'happy-dom',
      include: ['src/libs/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
    },
    ...省略
  }
})

import { debounce } from 'umaki'

const debouncedFunction = debounce(() => {
  console.log('Debounced!')
}, 300)

window.addEventListener('resize', debouncedFunction)

import { throttle } from 'umaki'

const throttledFunction = throttle(() => {
  console.log('Throttled!')
}, 300)

window.addEventListener('scroll', throttledFunction)

import { wrapTextWithSpans } from 'umaki'

const element = document.createElement('div')
element.textContent = 'hello'
wrapTextWithSpans(element)
console.log(element.innerHTML) // '<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>'

import { waitForAllMediaLoaded } from 'umaki'

;(async () => {
  const allMediaLoaded = await waitForAllMediaLoaded()
  console.log(allMediaLoaded) // true or false

  // first view only
  const firstViewMediaLoaded = await waitForAllMediaLoaded(true)
  console.log(firstViewMediaLoaded) // true or false
})()