First part based on the article of Peter Jang, Modern JavaScript Explained For Dinosaurs
This repository will implement the article and link to the corresponding commits/branches. You should be able to read along the article and follow the corresponding branches.
To see the current master branch in action you need to run
npm i && npm start
The second part will add some more common development tools to the mix until you created your first real modern webapp.
Branch: oldSchool
Showing how you do things with works with browser only, meaning no need for an httpd style server.
Some changes I added had been to override console.log to output to a div on the html.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>JavaScript Example</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script></head><body><h1>Hello from HTML!</h1><div>Console.log here:</div><divid="log"></div><script>// https://stackoverflow.com/questions/20256760/javascript-console-log-to-html(function(){varlogger=document.getElementById('log');console.log=function(message){if(typeofmessage=='object'){logger.innerHTML+=(JSON&&JSON.stringify ? JSON.stringify(message) : message)+'<br />';}else{logger.innerHTML+=message+'<br />';}}})();</script><scriptsrc="index.js"></script></body></html>Using a JavaScript package manager (npm)
Branch: npm
No special changes besides the names.
Diffgit diff 001_oldSchool..002_npm
Using a JavaScript module bundler (webpack)
Branch: webpack
No special changes besides adding bundle command to package.json. npm run bundle
Diffgit diff 002_npm..003_webpack
Transpiling code for new language features (babel)
Branch: babel
No special changes.
Diffgit diff 003_webpack..004_babel
Using a task runner (npm scripts)
Branch: scripts
No special changes besides to show how to link scripts in npm and implement "standard" target start and bundle.
Diffgit diff 004_babel..005_scripts
part2 will explain how to add things like linting, testing many more.