Webpack now bundling all our app code

- We use import/export to indicate dependencies
- Webpack makes sure everything loads in the correct order
- We can remove all our additional script tags in index.html

.gitignore

@@ -1,2 +1,3 @@
+.DS_Store
 node_modules
 dist

index.html

@@ -39,10 +39,5 @@
     </div>
     <img src="./assets/webpack.svg" />
   </body>
-  <script src="./src/app/alert.service.js"></script>
-  <script src="./src/app/component.service.js"></script>
-  <script src="./src/app/utils/inputs-are-valid.js"></script>
-  <script src="./src/app/utils/parse-inputs.js"></script>
-  <script src="./src/app/app.js"></script>
   <script src="./dist/main.js"></script>
 </html>

src/app/alert.service.js

@@ -1,4 +1,5 @@
-class AlertService {
+import { inputsAreValid } from "./utils/inputs-are-valid";
+export class AlertService {
   constructor() {
     this.errorBox = document.getElementById("error");
   }

src/app/app.js

@@ -1,6 +1,6 @@
-const alertService = new AlertService();
-const componentService = new ComponentService();
-const run = (alertService, componentService) => {
+import { inputsAreValid } from "./utils/inputs-are-valid";
+import { parseInputs } from "./utils/parse-inputs";
+export const run = (alertService, componentService) => {
   alertService.hideErrors();
 
   componentService.onClick(() => {
@@ -16,4 +16,3 @@ const run = (alertService, componentService) => {
     }
   });
 };
-run(alertService, componentService);

src/app/component.service.js

@@ -1,4 +1,4 @@
-class ComponentService {
+export class ComponentService {
   constructor() {
     this.numberOneInput = document.getElementById("numberOne");
     this.numberTwoInput = document.getElementById("numberTwo");

src/app/utils/inputs-are-valid.js

@@ -1,3 +1,3 @@
-const inputsAreValid = (...input) => {
+export const inputsAreValid = (...input) => {
   return input.every(num => typeof num === "number" && !isNaN(num));
 };

src/app/utils/parse-inputs.js

@@ -1,3 +1,3 @@
-const parseInputs = (...input) => {
+export const parseInputs = (...input) => {
   return input.map(str => parseInt(str));
 };

src/index.js

@@ -1 +1,6 @@
-alert("HELLO FROM WEBPACK!");
+import { run } from "./app/app";
+import { AlertService } from "./app/alert.service";
+import { ComponentService } from "./app/component.service";
+const alertService = new AlertService();
+const componentService = new ComponentService();
+run(alertService, componentService);