Vite:Building

Library Mode

샘플

https://github.com/osom8979/osom-ui - 참고.

2024-03-14 까지 커밋한 7fe9d37 해시, 0.0.24 Tag 를 참고하면 된다. - https://github.com/osom8979/osom-ui/tree/0.0.24

vite.config.ts

import {defineConfig} from 'vite';
import {resolve} from 'path';
import react from '@vitejs/plugin-react-swc';
import dts from 'vite-plugin-dts';

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [
    react(),
    dts({
      entryRoot: resolve(__dirname, 'src', 'lib'),
      insertTypesEntry: true,
    }),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src', 'lib', 'index.ts'),
      name: 'osom-ui',
      formats: ['es', 'umd'],
      fileName: format => `osom-ui.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

package.json

{
  "name": "osom-ui",
  "version": "0.0.11",
  "description": "osom ui",
  "repository": "https://github.com/osom8979/osom-ui",
  "author": "zer0",
  "license": "MIT",
  "type": "module",
  "main": "./dist/osom-ui.umd.js",
  "module": "./dist/osom-ui.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/osom-ui.es.js",
      "require": "./dist/osom-ui.umd.js"
    }
  },
  "files": [
    "dist",
    "tailwind.plugin.osomui.js"
  ],
  "keywords": [
    "osom",
    "react",
    "ui"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:pages": "tsc && vite build -c vite.config.pages.ts",
    "style": "prettier src -w",
    "lint": "eslint src --ext jsx,js,tsx,ts --report-unused-disable-directives --max-warnings 0",
    "test": "jest",
    "preview": "vite preview -c vite.config.pages.ts"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.2",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-svg-transformer": "^1.0.0",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "sass": "^1.63.6",
    "tailwindcss": "^3.3.2",
    "ts-jest": "^29.1.0",
    "typescript": "^5.1.5",
    "vite": "^4.3.9",
    "vite-plugin-dts": "^3.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "es2021": true,
      "node": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended",
      "plugin:react-hooks/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
    },
    "plugins": [
      "@typescript-eslint",
      "prettier",
      "react-refresh"
    ],
    "rules": {
      "prettier/prettier": "error",
      "indent": [
        "error",
        2,
        {
          "SwitchCase": 1
        }
      ],
      "linebreak-style": [
        "error",
        "unix"
      ],
      "quotes": [
        "error",
        "single"
      ],
      "semi": [
        "error",
        "always"
      ],
      "react-refresh/only-export-components": "warn"
    },
    "ignorePatterns": [
      "node_modules",
      "dist",
      "pages"
    ]
  },
  "prettier": {
    "printWidth": 88,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "all",
    "bracketSpacing": false,
    "bracketSameLine": false,
    "arrowParens": "avoid",
    "htmlWhitespaceSensitivity": "ignore",
    "vueIndentScriptAndStyle": false,
    "endOfLine": "lf"
  },
  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "jsdom",
    "moduleNameMapper": {
      "\\.(css|sass|scss)$": "identity-obj-proxy",
      "\\.svg": "jest-svg-transformer"
    }
  },
  "packageManager": "[email protected]"
}

Troubleshooting

Attempted import error: 'Component' is not exported from 'react' (imported as 'lr').

라이브러리 프로젝트를 만들고 어플리케이션 프로젝트에서 해당 라이브러리를 dependencies 로 추가하여 사용할 때 React.Component에서 다음과 같은 에러가 발생될 수 있다:

...

- error ../osom-ui/dist/osom-ui.es.js
Attempted import error: 'Component' is not exported from 'react' (imported as 'lr').

Import trace for requested module:
../osom-ui/dist/osom-ui.es.js
./app/page.tsx

...

이 경우 라이브러리 프로젝트 파트에서 react 임포트 코드를 확인해 보자:

import * as React from 'react';
export class Button extends React.Component { /* ... */ }

... 와 같이 되어 있다면 다음과 같이 바꾸자:

import {Component} from 'react';
export class Button extends Component { /* ... */ }