Cách Sử Dụng Thư Viện gantt-task-react Nội Bộ Với npm link và Phân Biệt Với Bản NPM

🚀 Khi nào nên dùng npm link?

• Bạn fork hoặc clone một thư viện (như gantt-task-react) và muốn chỉnh sửa theo nhu cầu riêng.

• Bạn không muốn publish lên NPM mỗi lần thay đổi.

• Bạn đang phát triển song song cả thư viện và project chính.

---

✅ Cách Dùng npm link Với gantt-task-react

Bước 1: Chuẩn bị thư viện nội bộ

cd /path/to/gantt-task-react npm install npm run build # nếu có script build npm link

Lệnh npm link tạo một symlink (liên kết biểu tượng) đến thư viện trong môi trường toàn cục của Node.

---

Bước 2: Liên kết vào project chính

cd /path/to/my-project npm link gantt-task-react

Lưu ý: Tên gantt-task-react phải trùng với name trong package.json của thư viện bạn fork.

---

Bước 3: Import như bình thường trong code

import { Gantt } from "gantt-task-react";

---

🔍 Cách Phân Biệt Bản NỘI BỘ vs Bản NPM

1. Kiểm tra symlink trong node_modules

ls -l node_modules/gantt-task-react

• Có mũi tên (->) trỏ đến thư mục thư viện → đang dùng bản nội bộ

• Không có → đang dùng bản tải từ NPM

---

2. Kiểm tra bằng lệnh npm

npm ls gantt-task-react

Kết quả ví dụ:

└── gantt-task-react@file:../gantt-task-react

→ Bản nội bộ

→ Bản từ NPM

---

3. Thêm log để debug runtime

Trong code thư viện gantt-task-react, thêm dòng:

console.log("⚠️ ĐANG DÙNG BẢN GANTT-TASK-REACT LOCAL DEV");

Nếu thấy log khi chạy app → bạn đang dùng bản nội bộ.

---

4. Kiểm tra trong package-lock.json hoặc yarn.lock

"gantt-task-react": { "version": "file:../gantt-task-react" }

→ Bản nội bộ

---

🧼 Cách Quay Lại Bản Gốc Trên NPM

Gỡ liên kết:

npm unlink gantt-task-react

 

Gỡ bản nội bộ:

npm uninstall gantt-task-react

Cài lại bản chính thức:

npm install gantt-task-react

---

💡 Lưu Ý & Mẹo Dev

• npm link rất tiện để dev nhanh nhưng không phù hợp production.

• Nếu muốn chia sẻ nội bộ trong team có CI/CD, nên publish package riêng với tên khác như @my-org/gantt-task-custom.

---

📦 Mẫu package.json nếu bạn muốn đổi tên thư viện

{ "name": "@your-scope/gantt-task-react-custom", "version": "1.0.0", "main": "dist/index.js", "types": "dist/index.d.ts" }

---

✅ Kết Luận

Sử dụng npm link là một giải pháp cực kỳ hiệu quả để phát triển thư viện song song với project mà không cần publish lên NPM. Việc hiểu rõ cách kiểm tra bản nội bộ giúp bạn tránh được nhiều lỗi không đáng có trong quá trình dev.

---

Nếu bạn thấy bài viết hữu ích, hãy chia sẻ cho anh em dev khác hoặc để lại bình luận bên dưới nếu muốn mình viết tiếp phần publish package riêng, CI/CD cho thư viện nội bộ, hoặc best practices khi fork thư viện opensource.

Tác giả: Bạch Ngọc Toàn

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.