5. Modular JavaScript

Activity 6: Creating a Lightbulb with a Flash Mode

Solution:

1. Install the babel-cli and babel preset as developer dependencies:

   npm install --save-dev webpack webpack-cli @babel/core @babel/cli @babel/preset-env

2. Add a file called .babelrc to the root directory. In it, we will tell Babel to use the preset settings:

   {
     "presets": ["@babel/preset-env"]
   }

3. Add a webpack configuration file at webpack.config.js in the root directory:

   const path = require("path");
   module.exports = {
     mode: 'development',
     entry: "./build/js/viewer.js",
     output: {
       path: path.resolve(__dirname, "build"),
       filename: "bundle.js"
     }
   };

4. Create a new file called js/flashingLight.js. This should start as a blank ES6 component that extends Light. In the constructor, we will include state, brightness, and flashMode...