Tech 🖥 : How to make npm package

Posted: April 01, 2023

This is the tutorial about how to make,publish npm package with Vite - React, TypeScript

Setting up

Vite - React, TypeScript

$ npm create vite@latest
(optional)
$ npm install -D tailwindcss postcss autoprefixer

my setting

✔ Select a framework: › React ✔ Select a variant: › TypeScript + SWC

After you installed npm package, you will see initial project screen.

Optional

Tailwindcss

Install Tailwind CSS using PostCSS - Tailwind CSS

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

https://tailwindcss.com/docs/installation/using-postcss

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {

Add also index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Change the vite.config.ts

you also need to add

npm i vite-plugin-dts -D

npm i path

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "index.ts"),
      name: "ViteButton",
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
    sourcemap: true,
    emptyOutDir: true,
  },
  plugins: [react(), dts()],
});