avatarJen-Hsuan Hsieh (Sean)

Summary

The article outlines a process for refactoring embedded AMD modules into standalone JavaScript files for use with Webpack in ASP.NET applications.

Abstract

The article addresses the challenge of migrating legacy AMD modules embedded in HTML/cshtml files to a more modern Webpack-based module system. It provides a step-by-step guide to refactor these modules into independent .js files, which involves creating base modules with deep copies of data, splitting the modules, and setting up a new Webpack entry bundle. The author emphasizes the importance of using deep copy techniques for ES5 and ES6, binding exposed functions, and configuring Webpack properly to handle the migration. The process culminates in calling the exposed functions from the HTML/cshtml files after the migration. The author, Sean, shares this as a personal note and invites feedback from the community.

Opinions

  • The author believes that the previous method of moving embedded AMD modules to stand-alone files was inadequate and proposes a more efficient approach.
  • The use of deep copy techniques is considered essential for preserving data integrity during the migration process.
  • The author suggests that using object.assign in ES6 is a preferable method for copying object properties.
  • Binding exposed functions from the base module is highlighted as a critical step in the refactoring process.
  • The author advocates for the use of html-webpack-plugin to streamline the generation of HTML files during the build process.
  • Sean values community feedback and encourages readers to engage with the content and provide suggestions for improvement.
  • The article is presented as a learning resource, with the author reflecting on their experiences and sharing insights gained from the migration process.

A Better Process to Move Embedded AMD modules from the HTML/CSHTML files to Webpack Bundles

Introduction

The legacy code may contain AMD modules in HTML/cshtml files. The require function can’t be found when using Webpack instead of Require.js. Regarding the scope of require and define only exists in .js files, we have to split embedded modules to independent .js files.

source: https://readmedium.com/how-do-i-migrate-requirejs-modules-from-scriptbundle-to-webpack-on-asp-net-8b9c5e414966#a2a5

I have noted the process of migration in the following article. However, the steps to move embedded AMD modules to stand-alone JavaScript files are not good enough. In this article, we have a better way rather than putting data in hidden fields.

Example for Refactoring the Embedded module

Here is an example of the embedded module in the cshtml file.

We will follow the following steps to refactor it.

  1. Move out embedded modules
  2. Create a new entry bundle
  3. Set the Webpack config file
  4. Call exposed functions in HTML/cshtml

Details

1. Move out embedded modules

Create a base module. In order to store data to the memory, use deep copy and return itself.

  • For ES5: copy each keys and values from the object
  • For ES6: use object.assign

Refactor the module. Bind the exposed functions from the base module.

2. Create a new entry bundle

  • Create an entry bundle and require the new module. Expose a new function with the new module

3. Set the Webpack config file

  • Create the js template file
  • Compile Webpack bundles
gulp -b "D:\work\project" --color --gulpfile "D:\work\project\Gulpfile.js" webpack

4. Call exposed functions in HTML/cshtml

That’s it!

References

Summary

Thanks for your patient. I am Sean. I work as a software engineer.

This article is my note. Please feel free to give me advice if any mistakes. I am looking forward to your feedback.

  • The Facebook page for articles
  • The latest side project: Daily Learning

Related topics

How to use the two-way binding in Knout.js and ReactJS?

Learn how to use SignalR to build a chatroom application

My reflection of :

IT & Network:

Database:

Software testing:

Debugging:

DevOps:

Software Development
Webpack
Requirejs
Web Development
JavaScript
Recommended from ReadMedium
avatarAfan Khan
Microsoft is ditching React

Here’s why Microsoft considers React a mistake for Edge.

6 min read
avatarAlexander Nguyen
The resume that got a software engineer a $300,000 job at Google.

1-page. Well-formatted.

4 min read
avatarTari Ibaba
5 amazing new JavaScript features in ES15 (2024)

5 juicy ES15 features with new functionality for cleaner and shorter JavaScript code in 2024.

4 min read
avatarMate Marschalko
28 JavaScript One-Liners every Senior Developer Needs to Know

Learn how to implement complex logic with beautifully short and efficient next-level JavaScript syntax.

9 min read
avatarAndrew Zuo
Async Await Is The Worst Thing To Happen To Programming

I recently saw this meme about async and await.

5 min read
avatarArtturi Jalli
I Built an App in 6 Hours that Makes $1,500/Mo

Copy my strategy!

3 min read