강의

멘토링

로드맵

Programming

/

Front-end

Complete Guide to Frontend Build Systems - Part.1: Module System

"JS Build System, still confused?" The JS Build System's concepts and practices that never quite clicked, unified!

(5.0) 14 reviews

176 learners

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

Reviews from Early Learners

What you will learn!

  • 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

🛠 A modular system for front-end developers who aren't swayed by tools !

Once you understand the JS module system, Webpack and Vite are no longer scary!

  • 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 .

🙋‍♀ Recommended for these people!

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


🚀 After class

  • 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 .


👨‍🏫 Learn these things

1. A lecture on the development of the JS module system

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



2. Operational principles and practice of each module system

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.


3. Practical training on module systems by development tool

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 .

Who created this course


Fluid bacteria

  • (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)

Rafael

  • (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.

Do you have any questions?

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.

Things to note before taking the class

Practice environment available

  • Operating System and Version (OS): Windows, macOS

  • Tools used: Code editor (VS Code, cursor, Webstorm, etc.)

    • The lecture is explained using VS Code.

Learning Materials

  • The portions presented in PPT during the lecture are provided in PDF format.

  • A practical example is available on github.

This lecture is the first in a series of lectures.

  • The series will be followed by lectures on package managers, bundlers, and transpilers !


Recommended for
these people

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

Hello
This is

176

Learners

14

Reviews

1

Answers

5.0

Rating

1

Course

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

(전) 버즈니

(현) 카카오모빌리티

Curriculum

All

43 lectures ∙ (5hr 12min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

14 reviews

5.0

14 reviews

  • oracion님의 프로필 이미지
    oracion

    Reviews 5

    Average Rating 5.0

    5

    98% enrolled

    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.

    • hackurity01님의 프로필 이미지
      hackurity01

      Reviews 1

      Average Rating 5.0

      5

      17% enrolled

      • seobm79968177님의 프로필 이미지
        seobm79968177

        Reviews 1

        Average Rating 5.0

        Edited

        5

        91% enrolled

        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.

        • solidinfra님의 프로필 이미지
          solidinfra

          Reviews 1

          Average Rating 5.0

          5

          12% enrolled

          • chloe111님의 프로필 이미지
            chloe111

            Reviews 1

            Average Rating 5.0

            5

            35% enrolled

            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 :)

            Limited time deal ends in 7 days

            $34.10

            24%

            $45.10

            Similar courses

            Explore other courses in the same field!