ES6 Modules: Rewrite lesson (alongside separate PR for Webpack rewrite)

[MaoShizhong]

Because

The current Webpack lesson is a known pain point in the curriculum journey, primarily due to the sudden increase in complexity and steps of tooling, coupled with how much of the learning is left to external resources. These external resources limit the cohesiveness of teaching material, and can prove troublesome in the learning process when each resource includes a few unnecessary tidbits that can easily throw learners off (such as multiple entry points in the webpack official guides when learning about html-webpack-plugin). They also are frequently aimed at people who may know a little more about bundlers already, or are following a different course/tutorial. Thus, things often feel disjointed with the TOP curriculum.

While improving the Webpack lesson itself is the primary focus, it was also identified that the preceding ES6 modules lesson is fairly coupled with it, as Webpack and bundlers are introduced there instead of the Webpack lesson.

The order of the ES6 modules lesson was also identified as a little odd, and the order and flow could be improved by focusing on ES6 modules as a primary topic straight away, then introducing bundlers and Webpack in their own separate lesson.

General plan:

• Rewrite ES6 modules lesson
• Rewrite Webpack lesson
• Write new "Webpack revisited" lesson to go immediately after "Project: Restaurant Page".
  • Move more advanced but "convenience" topics there, like webpack-merge
  • Extract template repos section from "Linting" and place it here instead
• Tweak Project: Restaurant Page to reference any new material from preceding lesson changes if necessary

This PR

• Rewrites the ES6 modules lesson
• Adds a new lesson on npm

Issue

Closes #26976
Closes #26977

Additional Information

This will be something to merge alongside 3 other PRs:

1. (Webpack: Rewrite lesson with in-house tutorial (alongside ES6 Modules rewrite) #27961)
2. (Webpack: New second lesson after Project Restaurant Page #27962)
3. (Feature: Add new lessons from ESM/Webpack restructure to both pathways theodinproject#4522)

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[MaoShizhong]

Since we're working together on this, I'm tagging you here @advait0603 because I can only select team members in the review request list.

For you and @wise-king-sullyman (since you were also part of the original discussion leading to this work), please do feel free to leave review comments here whenever you have any time to do so. This PR is set as a draft just as the whole work is of course still in process, but reviews are welcome as we go along.

[MaoShizhong]

I've extended the dependency graph bit with some 3-file examples just because I felt having the lesson only deal with 2 files might still leave some questions about what imports where and what an entry point is in more complex projects that will definitely have more than 2 files.

If it's felt this is definitely too much and the 2-file example alone would be significantly better, please let me know.

[wise-king-sullyman]

Looking awesome, absolutely great work on this 🔥 🚀 ⭐

A few small requests and discussion points:

[MaoShizhong]

Had a crack at separating npm to its own lesson to follow the ESM lesson. The nice thing's that the separate lesson allows for a little more expansion on package.json, without having to shove all of it to a single assignment step. We can introduce an example of it first.

I left CJS at the end of ESM as it's not a big mention but an important one nonetheless, and I felt far more closely related to the ESM lesson's contents than the npm lesson's.

Also note that for now, I'm leaving npm scripts in the "Revisiting Webpack" lesson in #27962. The current justification is that the practical use cases of npm scripts might be more obvious after the Webpack tutorial and especially Restaurant Page project (particularly with the long deployment command). That gave me the perfect situation to refer to when introducing npm scripts. I could put it in this new npm lesson, but I feel there wouldn't be as good of an example of scripts that learners could actually relate to. Removing it from "Revisiting Webpack" would make it super short though, and I like the current length. Thoughts?

[wise-king-sullyman]

I LOVE it! Really awesome work on this!

[MaoShizhong]

I LOVE it! Really awesome work on this!

🚀
I just realised I didn't actually request reviews from you for the other PRs as part of this whole thing, but maybe you inferred that anyway and were planning to. Just in case not, you okay to review the other related PRs linked in the PR form for the Webpack rewrite and second Webpack lesson? In your own time of course, since there's so much to look at.