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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
<script src="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>
<div id="log"></div>
<script>
// https://stackoverflow.com/questions/20256760/javascript-console-log-to-html
(function () {
var logger = document.getElementById('log');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
})();
</script>
<script src="index.js"></script>
</body>
</html>Using a JavaScript package manager (npm)
Branch: npm
No special changes besides the names.
Diff git 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
Diff git diff 002_npm..003_webpack
Transpiling code for new language features (babel)
Branch: babel
No special changes.
Diff git 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.
Diff git diff 004_babel..005_scripts
part2 will explain how to add things like linting, testing many more.