How To Publish React Npm Package in npmjs.com with Vite

چجوری یه پکیج React.js رو توی سایت npmjs.com با Vite منتشر کنم؟

Table Of Content

• English Description

  • Create A Project With Vite
  • Change package.json

    • description
    • main
    • module
    • files
    • repository
    • version
    • keywords
    • author
    • license
  • Structure Of Package Folder
  • Config Vite
  • Publish To Npm
  • Update Package
  • Final word and Contact me
• توضیحات فارسی

  • ساختن پروژه جدید با Vite
  • تغییر فایل package.json

    • توضیحات
    • فایل اصلی
    • ماژول
    • فایل ها
    • ریپازیتوری
    • ورژن
    • کلمات کلیدی
    • توسعه دهنده
    • لایسنس
  • ساختار پوشه پکیج
  • کانفیگ Vite
  • انتشار پکیج
  • بروز رسانی پکیج
  • سخن پایانی و ارتباط با من

English Description ↑

Create A Project With Vite ↑

using npm :

npm create vite

using yarn :

yarn create vite

Your project name will be the same as your project address on the npm site, so it must be a unique name. Before choosing a name for your project, make sure that there is no such package with this name on the npm site

Change package.json ↑

You need to add the following in the package.json file

description ↑

A brief description of your project. You should add the full description in the README file

"description" : "This package serves as the entry point to the DOM and server renderers for React"

main ↑

Your final file that you need to publish (automatically created after the Build command)

You can only change the name of the file, but make sure that the name you choose must be the same as the name you write in the vite.config.js file.

"main" : "./dist/FINAL_PACKAGE_FILE_AFTER_BUILD.umd.js"

module ↑

This file is automatically created like main and only you can change its name (not its format) and this name must be the same as you define in vite.config.js file.

"module" : "./dist/FINAL_PACKAGE_FILE_AFTER_BUILD.es.js"

files ↑

The files you want to publish on the npm site. Usually, the dist folder (created after build) and the README file are placed in this section

"files" : ["dist" , "README.md"]

repository ↑

Enter the address of your git repository in this field

Make sure that the word git+ must be placed at the beginning of the url section, and after that, enter the repository address.

"repository" : {"type" : "git" , "url" : "git+URL_OF_GIT_REPOSITORY"}

version ↑

Your package version

The first number from the left, for large and general changes, The middle number for moderate changes and simple new features And the number on the right is changed for very minor changes and simple bugs

"version" : "1.0.0"

keywords ↑

Keywords related to your package that can have a significant impact on SEO and finding your package. So fill this section carefully and patiently

"keywords" : ["react" , "ui kit"]

author ↑

The name of the group, organization or person who developed the package

"author" : "Mohammad Zolghadr"

license ↑

Enter your package license

"license" : "MIT"

---

Structure Of Package Folder ↑

• In the src folder, you created a new folder called lib src>lib
• In the lib folder, we have an index.js file that imports and exports all the parts of the package that we made.

  All the files, functions, components, etc. that you want to publish must be entered in this file.

import { yourPackageFunction } from './YOUR_FOLDER';
export { yourPackageFunction };

• In the lib folder, based on our project, we create folders related to the things we want to publish and note that import and export all of these in the primary index, i.e. src>lib>index.js

Config Vite ↑

• install path package npm i path or yarn add path

• Change the** vite.config.js** file as follows

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.js'),
      name: 'NameOfYourPackage',
      fileName: (format) => `name.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
        },
      },
    },
  },
  plugins: [react()],
});

1. You only need to add the build section
2. The name you chose in the fileName section must be the same as the name you wrote in the main of package.json

Publish To Npm ↑

• Create a free account at npmjs.com

• Enter the build command in the terminal of your project yarn build or npm run build

  With this, after a few seconds, your dist folder will be created, ready to publish to the npm site

• Enter the npm login command in the terminal and enter your account information

• We type the npm publish command in the terminal and after a few seconds, our package will be published on the npm website :)

Update Package ↑

If you want to release an update for your package, you should :

1. Change the package version in the package.json file
2. Run the build command to update the contents of the dist folder
3. Run the npm publish command to update the new version on the npm site

Final word and Contact me ↑

I hope that you have made enough use of this document If it works for you, I would appreciate it if you could encourage me by giving a star to this repo If you want, you can connect with me in different social networks

gmail : dev.mohammadzolghadr@gmail.com
instagram : mozo.plus
linkedin : mohammad-zolghadr
myWebsite : mohammadzolghadr.ir

توضیحات فارسی ↑

ساختن پروژه جدید با vite ↑

استفاده از npm :

npm create vite

استفاده از yarn :

yarn create vite

نام پروژه شما با آدرس url پروژه شما در سایت npm یکی خواهد بود، بنابراین باید یک نام منحصر به فرد انتخاب کنید. قبل از انتخاب نام برای پروژه، مطمئن شوید که چنین پکیجی با این نام در سایت npm وجود ندارد

تغییر فایل package.json ↑

باید تغییرات زیر رو توی فایل package.json ایجاد کنی

توضیحات ↑

توضیحی کوتاه درمورد پکیج و نتیجه استفاده از پکیج رو اینجا بنویس. توضیحات کامل تر و نحوه استفاده از پکیج و.. رو بعدا توی فایل README باید اضافه کنی

"description" : "This package serves as the entry point to the DOM and server renderers for React"

فایل اصلی ↑

آدرس فایل نهایی که قراره منتشر بشه (به صورت اتوماتیک توسط دستور Build ساخته میشه)

شما فقط باید اسم فایل را تغییر بدی (نه فرمتش رو)، ولی حتما حواست باشه که اسمی رو که ایمنجا مینویسی باید دقیقا همون اسمی باشه که توی فایل vite.config.js می نویسی. (توی بخش کانفیگ Vite، درباره‌ش بیشتر توضیح میدیم)

"main" : "./dist/FINAL_PACKAGE_FILE_AFTER_BUILD.umd.js"

ماژول ↑

این فایل هم اتوماتیک ساخته میشه (دقیقا مثل main) و فقط باید آدرس اسمش رو تغییر بدی (نه فرمتش رو) و این اسم هم باید دقیقا همون اسمی باشه که توی فایل vite.config.js تعریف کردی.

"module" : "./dist/FINAL_PACKAGE_FILE_AFTER_BUILD.es.js"

فایل ها ↑

اینجا مشخص میکنی که کدوم فایل ها رو میخوای توی سایت npm منتشر کنی. معمولاً پوشه dist (که بعد از اجرای دستور Build به صورت اتوماتیک ساخته میشه) و فایل README رو توی این قسمت قرار میدیم

"files" : ["dist" , "README.md"]

ریپازیتوری ↑

آدرس ریپازیتوری گیت هاب رو توی این قسمت وارد کن

دقت کن که کلمه git+ باید توی قسمت اول url قرار بگیره و بعد از اون، آدرس گیت هاب رو وارد کن.

"repository" : {"type" : "git" , "url" : "git+URL_OF_GIT_REPOSITORY"}

ورژن ↑

ورژن پکیجت توی این قسمت قرار میگیره

اولین عدد از سمت چپ، برای تغییرات بزرگ و کلی، عدد وسط برای تغییرات متوسط ​​و ویژگی های جدید ساده و عدد سمت راست برای تغییرات بسیار جزئی و اشکالات و باگ های ساده تغییر می کنه

"version" : "1.0.0"

کلمات کلیدی ↑

کلمات کلیدی که به نوعی به پکیجت مرتبط میشه رو اینجا بنویس. چون تاثیر بسزایی توی سئو و سرچ پکیجت داره، پس این قسمت رو با دقت و حوصله زیادی پر کن

"keywords" : ["react" , "ui kit"]

توسعه دهنده ↑

اسم تیم، گروه، سازمان، یا هر شخصی که این پکیج رو توسعه داده رو توی این بخش وارد کن

"author" : "Mohammad Zolghadr"

لایسنس ↑

لایسنس پکیجت رو اینجا وارد کن

"license" : "MIT"

---

ساختار پوشه پکیج ↑

• توی پوشه src، یه پوشه جدید بساز به اسم lib. به این شکل src>lib
• توی پوشه lib، یه فایل index.js داریم (میسازیم) که همه توابع، کامپوننت ها و به طور کلی هر چیزی که ساختیم رو توی این فایل import و export میکنه.

  همه فایل ها، توابع، کامپوننت ها و ... که میخوای منتشر کنی رو باید توی این فایل وارد بنویسی.

import { yourPackageFunction } from './YOUR_FOLDER';
export { yourPackageFunction };

• توی پوشه lib، بر اساس پروژه‌مون، پوشه‌های مربوط به مواردی رو که میخوایم منتشر کنیم، ایجاد می‌کنیم و دقت کن که همه اینها رو توی فایل اولیه اصلی، یعنی src>lib>index.js باید import و export کنیم.

کانفیگ کردن Vite ↑

• پکیج path رو با دستور npm i path یا yarn add path نصب کن

• فایل vite.config.js مثل زیر عوض کن

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

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/lib/index.js'),
      name: 'NameOfYourPackage',
      fileName: (format) => `name.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
        },
      },
    },
  },
  plugins: [react()],
});

1. فقط بخش build رو باید اضافه کنی
2. اسمی رو که توی بخش fileName انتخاب میکنی، باید دقیقا همون اسمی باشه که برای بخش main توی فایل package.json نوشتی

انتشار پکیج ↑

• یه اکانت رایگان توی سایت npmjs.com بساز

• دستور build رو توی ترمینال پروژه‌ت بنویس yarn build یا npm run build

  با اینکار، پوشه dist در عرض چند ثانیه ساخته میشه و پکیجت آماده انتشاره

• دستور npm login رو توی ترمینال وارد کن و اطلاعات حسابت رو وارد کن که لاگین بشی

• دستور npm publish رو توی ترمینال بنویس و بعد از چند ثانیه میبینی که پکیجت با موفقیت توی سایت npm منتشر شده :)

بروز رسانی پکیج ↑

اگه میخوای نسخه جدید از پکیجت رو منتشر کنی، باید :

1. ورژن پکیجت رو توی فایل package.json تغییر بدی
2. دستور build رو بزن که محتویات پوشه dist بر اساس آخرین تغییراتی که دادی، بروز بشن
3. دستور npm publish رو بزن تا ورژن جدید پکیجت، توی سایت npm، آپلود شه

سخن نهایی و ارتباط با من ↑

امیدوارم که از این داکیومنت، استفاده کافی رو برده باشی اگه به دردت خورد، ممنون میشم که با ستاره دادن به این پروژه، باعث دلگرمی من بشی اگه بخوای، میتونی باهام توی شبکه های اجتماعی مختلف در ارتباط باشی

gmail : dev.mohammadzolghadr@gmail.com
instagram : mozo.plus
linkedin : mohammad-zolghadr
myWebsite : mohammadzolghadr.ir