"JS Build System, still confused?" The JS Build System's concepts and practices that never quite clicked, unified!
228 learners
Level Basic
Course period Unlimited
Reviews from Early Learners
5.0
서정우
I only knew about bundlers like webpack and vite at a shallow level, but after taking the lecture, I was able to understand the principles. Thank you.
5.0
Seo Tr
They clearly and easily explain the often-overlooked aspects of frontend development. It's easy to just gloss over module systems, but since it covers the concepts in detail from the fundamentals, it's highly recommended if you have a vague understanding of that area. There's a big difference between knowing and not knowing; I wish I had taken the time to study this earlier.
5.0
chaeyeon
The JS module system, which I always found confusing while doing frontend development... seems to be getting sorted out as I listen to the lecture. Not only the concepts of CommonJS, AMD, ESM, UMD, but also the historical context of why such structures emerged has been explained, so a framework is being established in my mind. Especially, by showing how the module system works in modern tools like Webpack and Vite, by examining actual configuration files, I'm reflecting on myself who used to be at the mercy of tools. 😊😊 I will diligently listen to the remaining lectures and strive to grow significantly. Thank you for the great lecture :)
Evolution of JS Module Systems and In-depth Operating Principles of CJS, AMD, ESM, UMD
Sorting out all the confusing grammar of require, import, define through scenario-based practice.
Full analysis of module systems in modern tools like Vite, SWC, TypeScript, Webpack
Circular references, conditional loading, even asynchronous modules, real-world problem-solving know-how
To fully utilize bundlers, package managers, and transpilers in practice, you need to have a solid understanding of the principles of the module system .
No matter what new tool comes out, if you have a solid understanding of the module system concept, you will be able to utilize the tool faster than anyone else .
Even if you build or distribute the library yourself, you need to know CJS, ESM, and UMD build strategies to provide error-free libraries .
A developer who wants to fully understand the front-end development environment from basics to practice and configure the environment as desired.
Junior developers who still don't understand what CJS, ESM, AMD, and UMD are
Developers who want to understand the core concepts of build tools such as Webpack, Vite, Rollup, and Babel and utilize them 100% in practice
You will clearly understand the differences between each method, such as ES Module, CommonJS, and AMD, and be able to select and apply them appropriately anytime, anywhere.
You will learn the module system integration principles of major tools such as Vite, Rollup, Webpack, and Babel , and you can customize complex settings without fear.
Understand the JS build system and quickly diagnose and resolve module errors that occur in the deployment pipeline .
With a comprehensive understanding of the module system and tool chain, you can proactively participate in your team's architectural decisions .
A chronological overview of the evolution of the JavaScript module system , from CJS to ESM.
Why did AMD split from CJS?
Why Node.js Adopted CommonJS
The problem UMD was trying to solve
Why Webpack and Babel came into being
Let's see with our own eyes how require, define, and import actually work and practice them.
CommonJS
→ Introduction to module specifications and package specifications
→ Deep Dive into How CJS Works
→ Description of the entire process from Resolution to Caching
→ CJS practice based on operating principles (circular reference, etc.)
→ Analysis of packages created with CJS
AMD
→ define function, asynchronous module loading flow
→ AMD Practice Using RequireJS
ES Module
→ Introduction to .mjs , export types, dynamic import, etc.
→ Parsing~Evaluation Flow Deep Dive
→ ESM practice based on operating principles
→ Module graph visualization
→ Circular reference explanation and comparison with CJS
UMD
→ Introduction to UMD
→
Browser & Node.js compatible
→ General library practice
🧪 You will acquire practical knowledge , not abstract concepts, through hands-on practice along with the operating principles of each module system.
We will look at the principles and process of building modules in environments such as Webpack, Vite, and Babel .
Package.json
Typescript (tsc)
Babel
Webpack
Rollup
Vite
ESLint
🔧 Instead of “memorizing” tool settings, you can “design” based on their internal workings .
(Former) Line Financial Front-end Developer
Samsung SSAFY, Programmers, etc. Front-end development lectures
Web Performance Optimization Course Creation and Book Publishing
Contribution to Microsoft Software Issue 393 (JS Topic) and Issue 392 (Blockchain Topic)
(Current) Kakao OO Front-end Developer
🤷♀ "I tried to create a library and distribute it, but some people can use it and others can't."
🤷♂ "I looked up Webpack and Vite settings on the Internet, but I don't really know what they mean."
🤷 "How do I organize a project with a tangled mix of import/export, require/module.exports?"
With over 9 years of experience in front-end development, library design, and bundler optimization ,
I've been asked this question countless times by my team.
Most developers know how to use tools, but they are quick to move on without deeply understanding why they work the way they do.
Then, when an error occurs or customization is needed, it falls apart.
We created this course to try to solve this frustration.
This lecture is not simply a lecture explaining the module.
In practice, there are questions such as "Why do I need to set this up?" and "Why does this conflict occur?"
This lecture will tell you the real reason and solution .
For working developers who want to use their tools freely, there is no course more necessary than this.
Q. Why should I learn the module system?
In practice, if you mix require and import, there will inevitably be conflicts. You need to understand how each module system works to structure your project without errors.
Q. Can even beginners listen?
Yes, I can hear it well enough.
This lecture is designed to be understandable even to those who are unfamiliar with the term “modular system.”
Let's take a closer look at the concept of JavaScript modules.
If you have ever used syntax like import, export, and require, then OK.
This is better for those who have used bundlers (Webpack, Vite) but don't know why they are set up that way.
Rather, those who are new to the modular system concept will be able to clearly understand “why we should use this.”
there is
Each time a concept comes up during the lecture, we will explain it repeatedly with visualized flowcharts, example code, and practical exercises.
Q. What kind of practical training do you do?
In Chapter 2, when learning about each module system, you will create your own module and solve errors together through practice in an environment similar to actual work.
In Chapter 3, we will solve issues that can be encountered while directly implementing the module system in various front-end development environment tools.
Operating System and Version (OS): Windows, macOS
Tools used: Code editor (VS Code, cursor, Webstorm, etc.)
The lecture is explained using VS Code.
The portions presented in PPT during the lecture are provided in PDF format.
A practical example is available on github.
The series will be followed by lectures on package managers, bundlers, and transpilers !
Who is this course right for?
To understand the frontend development environment and become an expert.
CJS, AMD, UMD, ESM: Only heard of, not properly understanding junior developer
For those who wish to understand how build tools operate, from theory to practice.
Those who wasted a lot of time struggling with build tools like Webpack and Babel
Someone troubled by module not found, circular dependency errors.
Need to know before starting?
JavaScript
228
Learners
22
Reviews
1
Answers
4.9
Rating
1
Course
(Current) Kakao Mobility
(Former) Buzzvil
(Former) Lotte Shopping e-Commerce Division
(Current) Kakao Mobility (Former) Buzzni (Former) Lotte Shopping e-Commerce Division
Co-instructor
All
43 lectures ∙ (5hr 12min)
Course Materials:
All
22 reviews
4.9
22 reviews
Reviews 1
∙
Average Rating 5.0
Edited
5
They clearly and easily explain the often-overlooked aspects of frontend development. It's easy to just gloss over module systems, but since it covers the concepts in detail from the fundamentals, it's highly recommended if you have a vague understanding of that area. There's a big difference between knowing and not knowing; I wish I had taken the time to study this earlier.
Reviews 5
∙
Average Rating 5.0
Reviews 1
∙
Average Rating 5.0
5
It's a thousand times better than typical React or Next.js lectures~ and it's fun too. Above all, I doubt there's a lecture that explains the module system, one of the foundations of JS, more easily and deeply than this one. From the history and development process of module systems, from CJS, AMD, UMD to ESM, I was able to learn in detail why such methods emerged, including their implementation and specifications. The lecture style of deepening understanding by actually implementing it was also great. I'm very much looking forward to the next series :)
Reviews 1
∙
Average Rating 5.0
5
The JS module system, which I always found confusing while doing frontend development... seems to be getting sorted out as I listen to the lecture. Not only the concepts of CommonJS, AMD, ESM, UMD, but also the historical context of why such structures emerged has been explained, so a framework is being established in my mind. Especially, by showing how the module system works in modern tools like Webpack and Vite, by examining actual configuration files, I'm reflecting on myself who used to be at the mercy of tools. 😊😊 I will diligently listen to the remaining lectures and strive to grow significantly. Thank you for the great lecture :)
Reviews 1
∙
Average Rating 5.0
Explore other courses in the same field!
25% off for new members
$35.10
25%
$45.10
![[Code Camp] Start with Pre-CampCourse Thumbnail](https://cdn.inflearn.com/public/courses/329913/cover/eee923cc-911b-4c2d-a445-9fddee8e5992/thumbnail-precamp.png?w=420)
![A Solid Front-End Bootcamp for Full-Stack Developers (HTML, CSS, Vanilla JavaScript + ES6) [Full-Stack Part 2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?w=420)
![[Code Camp] Highly concentrated backend course created at boot campCourse Thumbnail](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?w=420)
