Recreating Uglifyjs From Scratch: How To Minify Code And Generate Source Maps

Have you wondered how you can debug TypeScript applications in the browser while browsers only understand JavaScript? What about reproducing what webpack, uglifyjs, and other magic packages do behind the scenes to compress your code and transform 10kb of text into just a few bytes? Today you're gonna use one of the most advanced concepts for programming languages. You're gonna learn about Abstract Syntax Tree concepts. A technique that reads your code as a string and maps it into instructions such as variable definitions, function statements, and much more. This is how TypeScript transpile code to JavaScript, how UglifyJS or Webpack minify code, or even how Angular can migrate your code from one version to another without you having to refactor all codebase by yourself. My friends, this is really powerful and this video is the first content on the internet teaching you how to create a program that minifies and generates source maps that browsers can understand so you can debug the code you wrote whereas browsers are actually loading minified code. This way you can replace code without having to handle strings by hand. By the end of this video, you'll have the knowledge and confidence to discuss bundling processes by doing it from scratch Are you ready? Grab a drink and let's begin! ✅ SOURCE CODE ▸ https://bit.ly/creating-your-own-uglifyjs-code ✅ Access My Premium Content ▸ Ebook on Recreating Node.js from Scratch: https://bit.ly/ebook-recreating-nodejs ▸ Mastering Node.js Streams: https://bit.ly/nodejs-streams-training ✅ REFERENCES ▸Blog Post about Source Maps: https://web.dev/source-maps/ ▸ Source Maps visualizer: https://sokra.github.io/source-map-visualization/ ▸Enable Mapping on Firefox: https://umaar.com/dev-tips/96-resolve-variable-names ▸ Source Maps spec: https://sourcemaps.info/spec.html ▸TC39: https://tc39.es/ ▸TC39 Source Maps proposal: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit# ▸ acorn (generate AST): https://www.npmjs.com/package/acorn ▸escodegen (remove spaces and line breaks + validate JS syntax) : https://www.npmjs.com/package/escodegen ✅ FOLLOW ME ▸ Linkedin: https://linkedin.com/in/erickwendel ▸ Blog: https://erickwendel.com.br/ ▸ Facebook: https://fb.com/page.erickwendel ▸ Medium: https://medium.com/@erickwendel ▸ Twitter: https://twitter.com/erickwendel_ ▸ Telegram: https://bit.ly/canalerickwendel ✅ TIMELINE 00:00:00 - SUBSCRIBE NOW 00:00:47 - About the content of this video 00:02:11 - Tips for free Node.js and Javascript content 00:02:30 - Intro 00:04:03 - Why minifying code 00:05:15 - How Source Maps Work on Browsers 00:07:01 - How I came up with this solution 00:07:42 - The approach using Regex and String Replacers by ChatGPT (bad) 00:08:30 - Why I choose using the Abstract Syntax Tree approach 00:09:10 - How the Abstract Syntax Tree work 00:10:07 - The process for developing the project 00:10:54 - Quick break for announcements 00:11:54 - Starting up 00:12:12 - Node.js version used 00:12:27 - Start up the project - basic setup 00:21:28 - Creating the code minifier tool 00:47:13 - Generating the first minified source code 00:51:32 - Analyzing the minified source code in the browser's developer tools 00:55:27 - Node.js Streams course tip 00:56:11 - Creating the source map generator 01:20:45 - Storing the generated source map file 01:23:12 - Checking if the generated source map is valid 01:24:32 - Identifying and fixing a bug in the project 01:26:44 - Testing if it works in the browser 01:29:21 - Final considerations 01:30:10 - Blooper reels 01:31:22 - THANK YOU! #NodeJS #Bundling #Uglify #WebPack #SourceMaps #Minify #AbstractSyntaxTree #metaprogramming #BuldingTools #Tooling #JavaScript #WebDevelopment #BackendDevelopment #CodingTips #Programming #TechTalks #DeveloperCommunity #LearningToCode #SoftwareEngineering #CodingSkills #CodeNewbie #WebDevelopmentTips #DevelopmentTools #DebuggingTips #Acorn #ESCodegen #CodeQuality #ChromeDevs #FirefoxDevs #GoogleChromeTooling #SourceMapping