Vite로 NPM 패키지 개발

Vite가 멋진 이유

이전에는 npm 패키지를 개발할 때 npm 패키지를 배송하기 위해 수동 구성, 개발 단계 및 테스트가 많이 필요했습니다.

우리는 webpack 및 rollup 등의 npm 패키지에 대한 신속한 개발을 제공하는 템플릿 또는 상용구 오픈 소스 리포지토리를 다루고 있었습니다. 이들은 개발 및 테스트 시간을 단축하는 데 유용했습니다.

고맙게도 vite가 여기 있고 정말 멋져요! 여기서 매력적인 기능은 vite가 esbuild [ 1 ]와 종속성을 사전 번들로 묶는 것입니다. 이 기사에서 살펴볼 더 많은 기능이 있습니다.

첫 번째 npm 패키지를 빌드해 봅시다!

먼저 yarn create vite 로 생성해 보겠습니다.


이제 새 프로젝트가 스캐폴드되었으며 package.json 파일을 살펴보겠습니다.

{
  "name": "awesome-vite-module",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.5.4",
    "vite": "^2.9.9"
  }
}

다음으로 새로운 목표는 rollup 구성과 vite 구성을 함께 사용하여 프로젝트를 구성하는 것입니다.

먼저 rollup 에 내장된 vite 기능을 사용하고자 합니다. 필요한 새 패키지 종속성을 설치해 보겠습니다.

{
  "name": "awesome-vite-module",
  "private": true,
  "version": "0.0.0",
  "exports": {
    ".": {
      "import": "./dist/main.es.js",
      "require": "./dist/main.cjs.js"
    }
  },
  "main": "./dist/main.cjs.js",
  "module": "./dist/main.es.js",
  "typings": "./dist/main.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc && vite build",
    "build:watch": "tsc && vite build --watch",
    "dev": "vite",
  },
  "dependencies": {},
  "devDependencies": {
    "@rollup/plugin-typescript": "^8.2.1",
    "@types/node": "^17.0.35",
    "prettier": "2.6.2",
    "rollup-plugin-typescript-paths": "^1.3.0",
    "tslib": "^2.4.0",
    "typescript": "^4.7.2",
    "vite": "^2.9.9",
  }
}

다음으로 tsconfig.json 파일 [ 2 ]을 설정하겠습니다.

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client", "node"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"]
    }
  },
  "include": ["./src"],
  "exclude": ["node_modules"]
}

새로운 vite.config.ts [ 3 4 ]를 설정해야 합니다(또한 이 자습서는 typescript 스캐폴딩되어 있기 때문입니다).

// vite.config.ts
import { defineConfig } from "vite";

import typescript from "@rollup/plugin-typescript";
import path from "path";
import { typescriptPaths } from "rollup-plugin-typescript-paths";

export default defineConfig({
  plugins: [],
  resolve: {
    alias: [
      {
        find: "~",
        replacement: path.resolve(__dirname, "./src"),
      },
    ],
  },
  server: {
    port: 3000,
  },
  build: {
    manifest: true,
    minify: true,
    reportCompressedSize: true,
    lib: {
      entry: path.resolve(__dirname, "src/main.ts"),
      fileName: "main",
      formats: ["es", "cjs"],
    },
    rollupOptions: {
      external: [],
      plugins: [
        typescriptPaths({
          preserveExtensions: true,
        }),
        typescript({
          sourceMap: false,
          declaration: true,
          outDir: "dist",
        }),
      ],
    },
  },
});

그리고 간단한 데모 기능인 main.ts 라는 함수를 선언하기 위해 hello 를 정리하겠습니다.

// main.ts
const hello = (name: string) => {
  return `Hello there, ${name}!`;
};

export { hello };

거의 완료, 일부 청소

마지막으로 현재 필요하지 않은 파일을 제거해 보겠습니다.

style.css

index.html

빠른 테스트(단위 테스트 없이)

첫 번째npm 패키지를 테스트할 준비가 된 것 같습니다. 그러나 jest 또는 vitest 없이 빠른 테스트를 수행하려면 어떻게 해야 합니까?

There are two module testing suggestions, using yalc or npm link (yalc is preferred).

npm link 프로젝트에서 awesome-vite-module를 실행합니다.

npm link

그런 다음 이제 다른 프로젝트에서 사용할 수 있습니다. vite [ 5 ]라고 하는 다른 solidjs 기반 프레임워크를 사용하여 데모 프로젝트를 빠르게 스캐폴드해 보겠습니다.

npx degit solidjs/templates/js my-app
cd my-app
npm i
npm run dev

생성되고 종속성이 설치되면 여기에서 npm link awesome-vite-module를 실행합니다.

마지막으로 App.tsx 파일을 아래와 같이 수정합니다.

import type { Component } from "solid-js";

import logo from "./logo.svg";
import styles from "./App.module.css";

import { hello } from "awesome-vite-module";

const App: Component = () => {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>{hello("Brian")}</p>
      </header>
    </div>
  );
};

export default App;

굉장합니다. 작동하고 있습니다!

When you're done, execute npm unlink awesome-vite-module.

그게 다야!

이것이 이 문서의 끝입니다. 결국에는 첫 번째npm login 패키지를 만들 수 있고npm publish 나중에npm 만들 수 있습니다.

Did some sections not work, or returned errors? Debugging will be part of the learning journey - and if you learn better from examples, see the vite boilerplate of vanilla-ts here at https://github.com/entwurfhaus/vite-vanilla-ts-module.

이 기사/튜토리얼이 도움이 되었기를 바라며 요즘처럼 vite를 즐겨 사용하십시오! 감사합니다. 즐거운 코딩하세요!

참조

Vite | Slow Server Start

Vite | Features > Client Types

Vite | Building for Production > Customising the build

Vite | Config File > Config Intellisense

SolidJS | Getting Started