강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

Hướng dẫn hoàn hảo về hệ thống build Frontend - Part.1: Hệ thống Module

Hệ thống Build JS, bạn vẫn còn bối rối? Hợp nhất khái niệm và thực hành của hệ thống Build JS, vốn nghe nhưng chưa thấm thía!

(5.0) 14 đánh giá

163 học viên

  • Rafael
  • hackurity01
실습 중심
핵심원리
JavaScript
Node.js
Webpack
vite
esm

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Quá trình phát triển của hệ thống module JS và nguyên lý hoạt động chuyên sâu của CJS, AMD, ESM, UMD

  • Hệ thống hóa các ngữ pháp từng gây bối rối về require, import, define qua thực hành theo kịch bản.

  • Phân tích toàn diện hệ thống module trong các công cụ mới nhất như Vite, SWC, TypeScript, Webpack

  • Tham chiếu vòng lặp, tải theo điều kiện, đến mô-đun bất đồng bộ, bí quyết giải quyết vấn đề thực tế gặp phải.

🛠 Một hệ thống mô-đun dành cho các nhà phát triển front-end không bị ảnh hưởng bởi các công cụ !

Khi bạn đã hiểu hệ thống mô-đun JS, Webpack và Vite sẽ không còn đáng sợ nữa!

  • Để sử dụng đầy đủ các trình đóng gói, trình quản lý gói và trình biên dịch trong thực tế, bạn cần có hiểu biết vững chắc về các nguyên tắc của hệ thống mô-đun .


  • Bất kể công cụ mới nào ra đời, nếu bạn hiểu rõ về khái niệm hệ thống mô-đun, bạn sẽ có thể sử dụng công cụ đó nhanh hơn bất kỳ ai khác .


  • Ngay cả khi bạn tự xây dựng hoặc phân phối thư viện, bạn vẫn cần biết các chiến lược xây dựng CJS, ESM và UMD để cung cấp các thư viện không có lỗi .

🙋‍♀ Đề xuất cho những người này!

Một nhà phát triển muốn hiểu đầy đủ về môi trường phát triển front-end từ cơ bản đến thực hànhcấu hình môi trường theo ý muốn.

Các nhà phát triển mới vào nghề vẫn chưa hiểu CJS, ESM, AMD và UMD là gì

Các nhà phát triển muốn hiểu các khái niệm cốt lõi của các công cụ xây dựng như Webpack, Vite, Rollup và Babel và sử dụng chúng 100% trong thực tế


🚀 Sau giờ học

  • Bạn sẽ hiểu rõ sự khác biệt giữa từng phương pháp, chẳng hạn như ES Module, CommonJS và AMD, và có thể lựa chọn và áp dụng chúng một cách phù hợp mọi lúc, mọi nơi.

  • Bạn sẽ học các nguyên tắc tích hợp hệ thống mô-đun của các công cụ chính như Vite, Rollup, Webpack và Babel , và bạn có thể tùy chỉnh các cài đặt phức tạp mà không cần lo lắng.

  • Hiểu hệ thống xây dựng JS và nhanh chóng chẩn đoán và giải quyết các lỗi mô-đun xảy ra trong quá trình triển khai .


  • Với sự hiểu biết toàn diện về hệ thống mô-đun và chuỗi công cụ, bạn có thể chủ động tham gia vào các quyết định về kiến trúc của nhóm mình .


👨‍🏫 Hãy học những điều này

1. Bài giảng về sự phát triển của hệ thống mô-đun JS

Tổng quan theo trình tự thời gian về sự phát triển của hệ thống mô-đun JavaScript , từ CJS đến ESM.

  • Tại sao AMD tách khỏi CJS?

  • Tại sao Node.js áp dụng CommonJS

  • Vấn đề UMD đang cố gắng giải quyết

  • Tại sao Webpack và Babel ra đời



2. Nguyên lý hoạt động và thực hành của từng hệ thống module

Chúng ta hãy cùng xem tận mắt cách require, define và import thực sự hoạt động và thực hành chúng như thế nào.

  • CommonJS
    → Giới thiệu về thông số kỹ thuật của mô-đun và thông số kỹ thuật của gói


    → Tìm hiểu sâu về cách thức hoạt động của CJS
    → Mô tả toàn bộ quá trình từ Giải quyết đến Lưu trữ đệm
    → Thực hành CJS dựa trên các nguyên tắc hoạt động (tham chiếu vòng tròn, v.v.)
    → Phân tích các gói được tạo bằng CJS

  • AMD


    define hàm, luồng tải mô-đun không đồng bộ
    → Thực hành AMD sử dụng RequireJS

  • Mô-đun ES


    → Giới thiệu về .mjs , kiểu xuất, nhập động, v.v.


    → Phân tích cú pháp~Đánh giá luồng sâu
    → Thực hành ESM dựa trên các nguyên tắc hoạt động
    → Hình ảnh đồ thị mô-đun
    → Giải thích tham chiếu tuần hoàn và so sánh với CJS

  • UMD
    → Giới thiệu về UMD

    Tương thích với trình duyệt và Node.js
    → Thực hành thư viện chung



🧪 Bạn sẽ có được kiến thức thực tế , không phải những khái niệm trừu tượng, thông qua thực hành cùng với các nguyên tắc hoạt động của từng hệ thống mô-đun.


3. Đào tạo thực hành về hệ thống module bằng công cụ phát triển

Chúng ta sẽ xem xét các nguyên tắc và quy trình xây dựng mô-đun trong các môi trường như Webpack, Vite và Babel .

  • Gói.json

  • Bản đánh máy (tsc)

  • Tháp Babel


  • Gói web

  • Cuộn lên

  • Vite

  • ESLint

🔧 Thay vì “ghi nhớ” các cài đặt công cụ, bạn có thể “thiết kế” dựa trên hoạt động bên trong của chúng .

Ai đã tạo ra khóa học này


Vi khuẩn lỏng

  • (Cựu) Nhà phát triển Front-end của Line Financial

  • Samsung SSAFY, Lập trình viên, v.v. Bài giảng về phát triển front-end

  • Khóa học Tối ưu hóa Hiệu suất Web và Xuất bản Sách

  • Đóng góp cho Microsoft Software Issue 393 (Chủ đề JS) và Issue 392 (Chủ đề Blockchain)

Rafael

  • (Hiện tại) Nhà phát triển giao diện người dùng Kakao OO


🤷‍♀ "Tôi đã cố gắng tạo ra một thư viện và phân phối nó, nhưng một số người có thể sử dụng nó còn những người khác thì không."
🤷‍♂ "Tôi đã tra cứu cài đặt Webpack và Vite trên Internet, nhưng tôi không thực sự hiểu chúng có nghĩa là gì."
🤷 "Làm thế nào để tôi có thể tổ chức một dự án với sự kết hợp phức tạp giữa import/export, require/module.exports?"

Với hơn 9 năm kinh nghiệm trong phát triển front-end, thiết kế thư viện và tối ưu hóa bundler ,
Nhóm của tôi đã hỏi tôi câu hỏi này vô số lần.

Hầu hết các nhà phát triển đều biết cách sử dụng các công cụ, nhưng họ nhanh chóng chuyển sang công cụ khác mà không hiểu sâu sắc tại sao chúng lại hoạt động theo cách đó.
Sau đó, khi xảy ra lỗi hoặc cần tùy chỉnh, nó sẽ hỏng.

Chúng tôi tạo ra khóa học này để cố gắng giải quyết nỗi thất vọng này.

Bài giảng này không chỉ đơn thuần là bài giảng giải thích về mô-đun.
Trong thực tế, có những câu hỏi như "Tại sao tôi cần phải thiết lập điều này?" và "Tại sao xung đột này lại xảy ra?"
Bài giảng này sẽ cho bạn biết lý do thực sự và giải pháp .

Đối với các nhà phát triển muốn sử dụng công cụ của mình một cách thoải mái thì không có khóa học nào cần thiết hơn khóa học này.

Bạn có thắc mắc nào không?

H. Tại sao tôi nên học hệ thống mô-đun?

Trên thực tế, nếu bạn kết hợp require và import, chắc chắn sẽ xảy ra xung đột. Bạn cần hiểu rõ cách thức hoạt động của từng hệ thống module để cấu trúc dự án của mình không gặp lỗi.

H. Người mới bắt đầu có thể nghe được không?

Vâng, tôi có thể nghe rõ.

Bài giảng này được thiết kế để dễ hiểu ngay cả với những người không quen với thuật ngữ “hệ thống mô-đun”.
Chúng ta hãy cùng xem xét kỹ hơn khái niệm mô-đun JavaScript.

Nếu bạn đã từng sử dụng cú pháp như import, export và require thì OK.
Điều này tốt hơn cho những người đã sử dụng bundler (Webpack, Vite) nhưng không biết tại sao chúng lại được thiết lập theo cách đó.

Thay vào đó, những người mới làm quen với khái niệm hệ thống mô-đun sẽ có thể hiểu rõ “tại sao chúng ta nên sử dụng hệ thống này”.

Mỗi khi một khái niệm xuất hiện trong bài giảng, chúng tôi sẽ giải thích nhiều lần bằng sơ đồ trực quan, mã ví dụ và các bài tập thực hành.

H. Bạn thực hiện loại hình đào tạo thực tế nào?

Trong Chương 2, khi tìm hiểu về từng hệ thống mô-đun, bạn sẽ tự tạo mô-đun của riêng mình và cùng nhau giải quyết lỗi thông qua thực hành trong môi trường tương tự như công việc thực tế.

Trong Chương 3, chúng ta sẽ giải quyết các vấn đề có thể gặp phải khi triển khai trực tiếp hệ thống mô-đun trong nhiều công cụ môi trường phát triển front-end khác nhau.

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành có sẵn

  • Hệ điều hành và phiên bản (OS): Windows, macOS

  • Công cụ sử dụng: Trình soạn thảo mã (VS Code, cursor, Webstorm, v.v.)

    • Bài giảng được giải thích bằng VS Code.

Tài liệu học tập

  • Các phần trình bày trong PPT trong bài giảng được cung cấp ở định dạng PDF.

  • Một ví dụ thực tế có sẵn trên github.

Bài giảng này là bài đầu tiên trong một loạt bài giảng.

  • Tiếp theo loạt bài giảng sẽ là các bài giảng về trình quản lý gói, trình đóng gói và trình biên dịch !


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những ai muốn hiểu về môi trường phát triển frontend và trở thành cao thủ.

  • Lập trình viên junior chỉ nghe nói CJS, AMD, UMD, ESM chứ chưa hiểu rõ.

  • Hiểu cách công cụ build hoạt động, từ nguyên lý đến thực tiễn.

  • Ai từng tốn nhiều thời gian vật lộn với các công cụ build như Webpack và Babel.

  • Ai đã từng đau đầu vì lỗi module not found, circular dependency?

Cần biết trước khi bắt đầu?

  • JavaScript

Xin chào
Đây là

163

Học viên

14

Đánh giá

1

Trả lời

5.0

Xếp hạng

1

Khóa học

(전) 롯데쇼핑 e커머스사업본부

(전) 버즈니

(현) 카카오모빌리티

Chương trình giảng dạy

Tất cả

43 bài giảng ∙ (5giờ 12phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

14 đánh giá

5.0

14 đánh giá

  • 서정우님의 프로필 이미지
    서정우

    Đánh giá 5

    Đánh giá trung bình 5.0

    5

    98% đã tham gia

    번들러는 webpack, vite 정도의 얕은 깊이로만 알고 있었는데 강의 듣고 원리를 이해할 수 있게 되었습니다. 감사합니다

    • 유동균님의 프로필 이미지
      유동균

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      17% đã tham gia

      • Seo Tr님의 프로필 이미지
        Seo Tr

        Đánh giá 1

        Đánh giá trung bình 5.0

        Đã chỉnh sửa

        5

        91% đã tham gia

        프론트엔드 개발에서 놓치기 쉬운 부분들을 명확하고 쉽게 설명을 해주시네요. 모듈시스템을 대충대충 알고 넘어가기 쉬운데 개념부터 자세히 나와있어서 해당부분에서 애매하게 알고있다면 강추입니다. 아는것과 모르는것은 큰 차이가 있는데 시간내서 미리 공부할걸 싶었네요

        • Rafael님의 프로필 이미지
          Rafael

          Đánh giá 1

          Đánh giá trung bình 5.0

          5

          12% đã tham gia

          • chaeyeon님의 프로필 이미지
            chaeyeon

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            35% đã tham gia

            프론트엔드 개발하면서 늘 헷갈렸던 JS 모듈 시스템… 강의를 들으면서 정리되고 있는 거 같아요. CommonJS, AMD, ESM, UMD 개념은 물론, 왜 그런 구조가 생겨났는지 역사적인 맥락까지 설명해주셔서 머리에 체계가 잡혀가고 있는 중입니다. 특히 Webpack, Vite 같은 최신 도구에서 모듈 시스템이 어떻게 작동하는지도 실제 설정 파일을 뜯어보며 알려줘서, 도구에 끌려 다니던 제 자신을 성찰하고 갑니다 ㅎㅎ 남은 강의도 열심히 들으면서 무럭무럭 성장해보겠습니다. 좋은 강의 감사합니다 :)

            1.225.662 ₫

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!