Liên Kết Tài Nguyên Dự Án Frontend – NPM

Tram Ho

Có thể nói việc liên kết và quản lý tài nguyên project là một công việc quan trọng, không chỉ liên quan đến web hay bất cứ lĩnh vực nào khác. Bài viết sẽ hướng dẫn cách thực hành, cũng như giới thiệu về Node Package Manager cho dự án frontend. Kiến thức được trình bày phù hợp cho newbie, kinh nghiệm học lập trình web dưới 2 năm.

file-folder-la-gi-cach-dat-ten-tep-to-chuc-thu-muc-hieu (5).jpg

1) Liên kết source code các file là gì ?

Liên kết source code các file hiểu đơn giản là đưa code từ file này sang file khác dùng. Tất cả các ngôn ngữ lập trình đều hỗ trợ tính năng này. Ta chia code ra code ở các file khác nhau để việc xây project trở nên dễ dàng hơn, tùy vào mục đích thiết kế ban đầu. Công việc này thực sự rất là khó, có thể coi là khó nhất trong sự nghiệp lập trình viên
23.png

Khi các bạn học lập trình theo một khóa học, bạn sẽ được dạy cách làm project bằng mẫu thiết kế có sẵn… hoặc không có thiết kế gì. Nên dường như ít ai biết đến thiết kế này, quanh năm làm dev

Bây giờ, mình sẽ ví dụ trong Javascript nhé
Trong javascript, file lập trình có đuôi là JS. Giả sử mình có một folder, bên trong là 2 file javascript (file1 và file2). Mình sẽ liên kết file1.js sang file2.js như sau

Lưu ý: nếu bạn muốn thực hành liên kết file2.js vào html page, hãy nhớ thêm thuộc tínhtype="module" vào tag script của nó. Tại vì file nào dùng import thì file đó phải khai báo type="module" để chương trình biết mà load các source code được liên kết vào

2) Liên kết file online

Khi học frontend, chắc hẳn bạn đã từng code một đoạn mã kiểu như này

Vậy bạn có thắc mắc nó như nào ? hoạt động kiểu sao không ?

Bây giờ chúng ta sẽ cùng build ra một cái như vậy để hiểu hơn nhé.

Mục tiêu của chúng ta là như này:


Khi bạn deploy một dự án frontend lên online, ví dụ như lên github page, vercel . . . . Toàn bộ source code của bạn sẽ được lưu ở một cái máy tính ở đâu đó. Đồng thời, nó cũng đưa tất cả code này lên môi trường internet online. Mục đích là cho sẵn sàng bất cứ người dùng nào trên internet đều có thể truy cập đến file của bạn. Có thể mình giải thích hơi khó hiểu, mình cùng nhau thực hành cho dễ hiểu nha.

  • Bước 1: Bạn tạo một repo trên github, đặt tên là mycode
  • Bước 2: Nhấn vào nút upload file lên, nhấn choose file để tiếp tục

    3.JPG
    tạo một file đuôi txt nhưng tí nữa lưu nó ở đuôi js, ví dụ mình đặt tên là chickendance.js
    Bên trong viết như sau

Click vào file đó để upload nó lên git, commit, và tadaaaa
112.JPG

Tới bước này, file chickendance.js đang nằm ở một cái máy tính bên Mỹ (Tho). Nó chưa được online, để nó trở nên online ta làm bước sau…

  • Bước 3: Vào phần setting, vào mục pages để deploy.
    Sau khi deploy xong bạn chờ tầm 2 phút, refresh lại trang là ta sẽ thấy đường link mà git cung cấp
    7.JPG
    Bạn click vô link đó, và ghi thêm đuôi chickendance.js nữa. Và. . . tadaaaa

p.jpg


Cùng test thử nào :

3) Node Package Manager

Ở hướng dẫn trên, công việc của mình là: đưa mã code online từ trên internet về local project của mình.

Công việc này có vài nhược điểm sau:

  • Mình phải biết cái đường link cung cấp mã code đó là gì
  • Khi trang web của chúng ta chạy, code mới được tải về. Vậy thà ta tải về localhost trước luôn, để trong project để nó tự link lấy, nhanh hơn
  • Lỡ có nhiều code khác nhau từ nhiều nguồn khác nhau tải về localhost, hoặc tải source code về nhiều. Sẽ gây khó quản lý

Giải pháp : Node Package Manager
Node Package Manager (viết tắt npm) là một chương trình máy tính. Chương trình này giúp chúng ta 2 công việc

  1. Tự động lên internet tải src code về, tích hợp vào project của chúng ta
  2. Quản lý các src code mà ta tải về thông qua nó

Trước đây mình từng làm các project về Java, Python.
Mình cũng được học về tính năng tương tự như vậy.
Ta không cần đi tải code thủ công rồi gắn vô project của mình như vậy.
Chỉ cần một vài lệnh cơ bản là chương trình sẽ tự lên mạng lấy source về,
tích hợp vào project của chúng ta.


Để cài đặt chương trình mang tên Node Package Manager về máy, ta google từ khóa “nodejs npm download”. Ta tải về nodejs (backend) nhưng không phải ta làm backend, tại vì trong nodejs đấy chứa npm nên ta mới làm vậy.

Hướng dẫn NPM
Sau khi cài đặt xong NPM về máy, ta bắt đầu thực hành về nó.
Bạn đang có 1 folder project frontend cơ bản (gồm HTML CSS Javascript) . Vào folder đó và bắt đầu gõ vào cmd của nó npm init, có thể dùng IDE Vscode để mở cmd thông qua “open terminal”. Lúc này, máy sẽ tạo ra cho ta một file package.json

567.JPG

Hãy bình tĩnh nếu đây là kiến thức mới của bạn. File .json là file chứa text (giống như file javascript hoặc file txt vậy) . Tuy nhiên text này chỉ chứa text dạng thông tin about. Ví dụ dùng file.json này để lưu thông tin tra cứu. Bên trong file package.json này là thông tin cấu hình cho webpack ( webpack là nơi là nơi lưu trữ và quản lý src code tải về).

Lúc này, khi bạn dùng câu lệnh cmd để tải code trên mạng về bằng npm. Lập tức một folder tên là node_modules được tạo ra. Trong đây chứa những src code mà bạn đã tải về

9.JPG

một vài lệnh ví dụ như: npx creacte-react-app reactjs , npm install firebase

Muốn lấy code từ source code ta tải về để link vô file.js của chúng ta, ta làm như sau


Chuyên môn của mình không phải là frontend. Những kiến thức trên là do quá trình mình tự mài mò thực hành và hiểu ra theo cách của mình… nên có thể đúng hoặc chưa đúng lắm. Các bạn có thể cùng nhau góp ý đúng sai ở phần bình luận dưới nhé . Nếu thấy bổ ích hãy like share cho bài viết này. Hẹn gặp lại các bạn ở bài tiếp theo 

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo