[vue3] vite build 시 배포버전 만들기 (한개의 파일로 생성)

 

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import fs from 'fs-extra'
//import { viteSingleFile } from "vite-plugin-singlefile"



export default defineConfig({

  worker: {
    format: 'es',
  },
  build: {

    lib: {
      entry: './src/main.js',
      name: 'my-library',
      format: 'es',
    },

    //assetsInlineLimit: 0,
    minify: true,
    //chunkSizeWarningLimit: 50000,
    sourcemap: false,
    //cssCodeSplit: false,    // 전체 프로젝트의 모든 CSS가 단일 CSS 파일로 추출됩니다. https://ko.vitejs.dev/config/build-options.html


    rollupOptions: {
      output: {
			},
		}
  },
  plugins: [
    vue(),
    //viteSingleFile(),
    nodePolyfills({
      // To exclude specific polyfills, add them to this list.
      exclude: [
        'buffer', // Excludes the polyfill for `fs` and `node:fs`.
      ],
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
    }),
    
  ],
  css: {
    devSourcemap: true,
    preprocessorOptions: {
        scss: {
          additionalData: `
            @import "@/style/__test.scss";
          `
        },
    },
  } ,
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

위 코드는 Vite 설정 파일(vite.config.js) 내에서 라이브러리(lib) 모드로 빌드를 구성하는 예제입니다.

이 설정을 통해 Vue 3 라이브러리를 빌드하고, 해당 라이브러리를 다른 프로젝트에서 사용할 수 있게 됩니다. 

worker: 워커(worker) 스크립트를 구성하는 옵션입니다. 

format 속성은 워커 스크립트의 모듈 형식을 설정합니다. 

이 코드에서는 워커 스크립트가 ES 모듈 형식으로 생성되도록 설정되었습니다.

build: 프로젝트의 빌드 옵션을 설정하는 섹션입니다.

lib: 라이브러리(lib) 모드로 빌드하기 위한 옵션입니다. 이 설정은 번들로 묶지 않고 라이브러리 형태로 빌드하게 됩니다. 

아래는 lib 옵션의 각 속성에 대한 설명입니다:

entry: 라이브러리의 진입점 파일을 지정합니다. 

이 파일은 라이브러리로 내보내고자 하는 Vue 3 컴포넌트 또는 기능을 정의하는 파일입니다. 

이 예제에서는 src/main.js 파일을 라이브러리 진입점으로 사용합니다.

name: 라이브러리의 이름을 설정합니다. 

이 이름은 나중에 라이브러리를 사용하는 프로젝트에서 참조할 때 필요합니다. 

예를 들어, import { MyComponent } from 'my-library'와 같이 사용할 수 있습니다.

format: 라이브러리의 모듈 형식을 설정합니다. 

이 코드에서는 ES 모듈 형식으로 라이브러리를 빌드하게 됩니다.

이 설정을 사용하면 Vite는 지정한 진입점 파일을 기반으로 Vue 3 라이브러리를 빌드하고, 해당 라이브러리를 사용하는 다른 프로젝트에서 my-library와 같이 참조할 수 있게 됩니다.

실제 결과 파일

> coForward Relay Socket Client@0.0.1 build
> vite build

vite v4.3.9 building for production...
✓ 1033 modules transformed.
dist/assets/webSocket_Shared-1c0f4008.js    367.89 kB
dist/assets/webSocket_Worker-98ed872d.js    368.30 kB
dist/style.css                                5.96 kB │ gzip:     1.68 kB
dist/coForward Relay Socket Client.js     2,875.08 kB │ gzip: 1,005.87 kB
dist/coForward Relay Socket Client.umd.cjs  2,413.46 kB │ gzip: 943.89 kB

배포시에는 아래 파일만 배포하면 됩니다.

• dist/assets/webSocket_Shared-1c0f4008.js
• dist/assets/webSocket_Worker-98ed872d.js
• dist/style.css 
• dist/coForward Relay Socket Client.umd.cjs

참고로 동적모듈을 사용하면 dist 디렉토리 안에 생성되고

dist/coForward Relay Socket Client.js 파일은 동적모듈파일을 로드하게 됩니다. 

모든 동적모듈 파일을 한 파일에서 사용하려면  dist/coForward Relay Socket Client.umd.cjs 파일 사용하면 됩니다.

UMD 란

UMD는 "Universal Module Definition"의 약자로, 여러 종류의 모듈 시스템과 호환성을 가지는 JavaScript 라이브러리를 만들 수 있는 형식을 의미합니다. 

UMD 형식은 모든 종류의 환경에서 사용할 수 있는 범용적인 모듈 형식을 제공하며, 브라우저 환경과 Node.js 환경 모두에서 동작합니다.

UMD 형식의 라이브러리는 브라우저에서 전역 변수로 사용할 수도 있고, CommonJS나 AMD와 같은 모듈 시스템을 통해 모듈로 가져와 사용할 수도 있습니다. 

이는 라이브러리를 다양한 프로젝트 및 환경에서 재사용하기 용이하게 만듭니다.

UMD 라이브러리는 대개 다음과 같은 형태로 정의됩니다:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD 환경
        define(['dependency'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS 환경 (Node.js)
        module.exports = factory(require('dependency'));
    } else {
        // 브라우저 환경
        root.LibraryName = factory(root.dependency);
    }
}(this, function (dependency) {
    // 라이브러리 로직
    return {
        // 노출할 함수 및 객체
    };
}));