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!
228 học viên
Độ khó Cơ bản
Thời gian Không giới hạn
Đánh giá từ những học viên đầu tiên
5.0
서정우
Tôi chỉ biết về bundler ở độ sâu nông cạn như webpack, vite, nhưng sau khi nghe bài giảng, tôi đã có thể hiểu được nguyên lý hoạt động. Cảm ơn.
5.0
Seo Tr
Giải thích rõ ràng, dễ hiểu những phần dễ bị bỏ qua trong phát triển Front-end. Hệ thống module dễ hiểu sơ sài, nhưng vì giải thích chi tiết từ khái niệm, rất khuyến khích nếu còn mơ hồ. Biết và không biết khác biệt lớn, lẽ ra tôi nên học trước.
5.0
chaeyeon
Khi phát triển frontend, hệ thống module JS mà tôi luôn bối rối... có vẻ như đang được sắp xếp lại khi nghe giảng. Không chỉ các khái niệm CommonJS, AMD, ESM, UMD mà còn giải thích cả bối cảnh lịch sử về lý do những cấu trúc đó ra đời, giúp tôi đang dần hình thành một hệ thống trong đầu. Đặc biệt, việc giải thích cách hệ thống module hoạt động trong các công cụ mới nhất như Webpack, Vite bằng cách phân tích trực tiếp các tệp cấu hình đã giúp tôi nhìn lại bản thân mình đã từng bị các công cụ dẫn dắt bấy lâu nay 😊😊 Tôi sẽ chăm chỉ nghe nốt các bài giảng còn lại và cố gắng trưởng thành vượt bậc. Cảm ơn vì bài giảng hay :)
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.
Để 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 .
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ành và cấ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ế
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 .
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
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.
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 .
(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)
(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.
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”.
có
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.
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.
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.
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 !
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
228
Học viên
22
Đánh giá
1
Trả lời
4.9
Xếp hạng
1
Khóa học
(Hiện tại) Kakao Mobility
(Cựu) Buzzni
(Cựu) Lotte Shopping bộ phận e-Commerce
(Hiện tại) Kakao Mobility (Trước đây) Buzzvil (Trước đây) Bộ phận Kinh doanh Thương mại điện tử Lotte Shopping
Đồng giảng viên
Tất cả
43 bài giảng ∙ (5giờ 12phút)
Tài liệu khóa học:
Tất cả
22 đánh giá
4.9
22 đánh giá
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Khi phát triển frontend, hệ thống module JS mà tôi luôn bối rối... có vẻ như đang được sắp xếp lại khi nghe giảng. Không chỉ các khái niệm CommonJS, AMD, ESM, UMD mà còn giải thích cả bối cảnh lịch sử về lý do những cấu trúc đó ra đời, giúp tôi đang dần hình thành một hệ thống trong đầu. Đặc biệt, việc giải thích cách hệ thống module hoạt động trong các công cụ mới nhất như Webpack, Vite bằng cách phân tích trực tiếp các tệp cấu hình đã giúp tôi nhìn lại bản thân mình đã từng bị các công cụ dẫn dắt bấy lâu nay 😊😊 Tôi sẽ chăm chỉ nghe nốt các bài giảng còn lại và cố gắng trưởng thành vượt bậc. Cảm ơn vì bài giảng hay :)
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
Hay hơn ngàn lần so với các khóa học React hay Next.js thông thường~ Lại còn thú vị nữa. Trên hết, tôi tự hỏi liệu có khóa học nào giải thích hệ thống module, một trong những nền tảng của JS, dễ dàng và chuyên sâu hơn thế này không. Tôi đã có thể tìm hiểu chi tiết về lịch sử và quá trình phát triển của hệ thống module, từ CJS, AMD, UMD đến ESM, lý do tại sao những phương pháp đó ra đời, cũng như cách triển khai và thông số kỹ thuật. Phương pháp giảng dạy giúp đào sâu sự hiểu biết bằng cách thực hành triển khai thực tế cũng rất hay. Tôi cũng rất mong chờ loạt bài tiếp theo :)
Đánh giá 5
∙
Đánh giá trung bình 5.0
Đánh giá 1
∙
Đánh giá trung bình 5.0
Đã chỉnh sửa
Đánh giá 1
∙
Đánh giá trung bình 5.0
Khám phá các khóa học khác trong cùng lĩnh vực!
Giảm 25% cho thành viên mới
900.342 ₫
25%
1.200.462 ₫
![[Code Camp] Bắt đầu với trại miễn phíHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/329913/cover/eee923cc-911b-4c2d-a445-9fddee8e5992/thumbnail-precamp.png?w=420)
![Bootcamp Frontend vững chắc cho Full Stack (HTML, CSS, JavaScript thuần + ES6) [Full Stack Phần 2]Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?w=420)
![[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcampHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?w=420)
