Build Tools Demos

This repo contains the build tools demos and explanation on how to conduct them

CommonJS

1. Show how to require and use built in modules to Node.js

   • Navigate to the builtInModules.js file
   • Explain the syntax for requiring in built in modules using the common.js module system
   • Show that you can do some interesting things with these modules like log current user info to the console (example code provided)
   • Note: you can simply run this file using Node to properly show logs to the console

2. Show how the Common.js module system imports/exports from one file to others

   • For this section you will be working in the common.js file and the greetings.js file

   • First, go to the greetings.js file and log the built in module object to the console using Node to show that you get a bunch of information about the current file/module

     • This is a good time to point out the exports property on the module object and explain that this will be accessible to other modules by using require statement

   • Next, uncomment the code for step 2 showing the myGreetings object with the sayHi method on it that is referencing a local variable in that file, name

   • Next, show the syntax of setting module.exports equal to our myGreetings object

   • Next, navigate to the common.js file and show how we can require the exported module.exports object from our greetings.js

   • Finally, execute the sayHi method on our myGreetings variable

   • Bonus Question: What happens when we add a different name variable in the common.js file and run our sayHi method? will it log that name or the name from the greetings.js file?

     • Answer: it will log the name from the greetings.js file. We are seeing closure play out here. Always remember, where we define our functions determine what variables we have access to when we execute our functions.

3. Show Common.js in more serious codebase

   • Finally, you will want to show the residents how Common.js work in larger code bases. You can do this in one of the Codesmith codebases (if you have access to it) or you can simply go ot the Database Assessment and show how it is being used there

ES6-Modules

1. Explain briefly what all of your files are doing

   • Inside the ES6-Modules directory there are 4 javascript files that are importing and exporting simple functions from file to file. Go through and briefly explain the syntax and what is happening in each of the files
   • Files to explain:
     • multiplyby2.js
     • addS.js
     • fizzBuzz.js
     • index.js

2. Show current HTML setup (without bundling)

   • Show that in the index.html file we have the index.js file linked
     • One would think that this would be okay.
   • Now show that when you render that html file there is an error in the console because the browser doesn't know how to handle the imports
   • for this reason we need to use webpack

3. Create the bundle and run the code

   • Make sure to run npm install in this directory to install Webpack and other dependencies
   • Explain that the browser doesn't yet know how to use ES6 Modules so we need to use webpack to take all of our source code files and create one JS file with all that source code to run in our browser
   • run the bundle script in this directory
   • Webpack will map out your dependency tree (follow all the import statements) and create a dist directory with a main.js bundle file in it.
   • Update your script tag in the index.html file to the dist.main.js file and refresh the browser to show it now working.