Week 12: JavaScript -  Modules and Tooling

Why Use Modules?

• Code Organization: Break code into reusable pieces
• Maintainability: Easier to manage and update code
• Reusability: Share modules across different parts of an application
• Isolation: Encapsulate functionality to avoid conflicts

Types of Modules

ES Modules (ESM)

• Introduced in ES6 (ES2015)
• Browser support in modern browsers
• Syntax:

 // Exporting
 export const myFunction = () => { /*...*/ };
 
 // Importing
 import { myFunction } from './myModule.js';

CommonJS Modules

• Used primarily in Node.js
• Syntax:

 // Exporting
 module.exports = myFunction;
 
 // Importing
 const myFunction = require('./myModule');

Using Modules in the Browser

• Use <script type="module"> to enable ES modules

 <script type="module" src="app.js"></script>

• Modules are loaded asynchronously
• Support for import/export syntax

Node.js and NPM

• Node.js: JavaScript runtime built on Chrome's V8 engine
• NPM: Node Package Manager with over 1.3 million packages
• Install Node.js from nodejs.org
• Check installation:

 node -v
 npm -v

Initializing a Node.js Project

• Create a new project directory
• Initialize with NPM:

 npm init -y

• Creates a package.json file

Installing and Using NPM Packages

• Install a package (e.g., Axios):

 npm install axios

• Use the package in your code:

 const axios = require('axios');

 axios.get('https://api.example.com/data')
   .then(response => console.log(response.data));

Introduction to Module Bundlers

• Why Use Bundlers?

  • Bundle multiple modules into a single file
  • Optimize code for production
  • Support for advanced features (e.g., code splitting)

• Popular Bundlers

  • Webpack
  • Parcel
  • Rollup
  • Vite

Webpack Basics

• Module bundler for JavaScript applications
• Key Concepts:
  • Entry: Starting point of the application
  • Output: Bundled file(s)
  • Loaders: Transformations on the code (e.g., Babel, CSS)
  • Plugins: Extend Webpack's functionality

Setting Up Webpack

1. Install Webpack and CLI:

 npm install webpack webpack-cli --save-dev

1. Create webpack.config.js:

 const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   mode: 'development',
 };

1. Add scripts to package.json:

 "scripts": {
   "build": "webpack"
 }

Using Loaders

• Purpose: Handle non-JavaScript files
• CSS Loader Example:
  1. Install loaders:

    npm install css-loader style-loader --save-dev

1. Update webpack.config.js:

    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    ```
 3. Import CSS in JavaScript:
    ```javascript
    import './styles.css';
    ```

HTML Webpack Plugin

• Generates an HTML file that includes all your bundles
• Installation:

 npm install html-webpack-plugin --save-dev

• Configuration:

 const HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [
   new HtmlWebpackPlugin({
     template: './src/index.html',
   }),
 ],

Webpack Dev Server

• Provides live reloading during development
• Installation:

 npm install webpack-dev-server --save-dev

• Usage:
  • Add to webpack.config.js:

   devServer: {
     contentBase: './dist',
     open: true,
   },

• Update scripts in package.json:

  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack"
  }
  ```"""

Babel Setup

• Transpile modern JavaScript into backward-compatible versions
• Installation:

  npm install @babel/core babel-loader @babel/preset-env --save-dev
  

• Configuration:

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  

Refactoring a Project to Use Modules

• Organize code into separate files
  • Example:

    src/
    ├── index.js
    ├── utils.js
    └── components/
        ├── header.js
        └── footer.js

• Exporting and Importing Modules:

 // utils.js
 export function capitalize(str) {
   return str.toUpperCase();
 }

 // index.js
 import { capitalize } from './utils';

Deployment Considerations

• Production Build:

  • Minification
  • Code splitting
  • Source maps

• Deployment Platforms:

  • Netlify
  • Vercel
  • GitHub Pages

Example: Simple Module Usage

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math';

console.log(add(2, 3)); // Output: 5

Tips for Effective Module Usage

• Keep Modules Focused: Each module should have a single responsibility
• Use Index Files: Re-export modules for cleaner imports

 // components/index.js
 export { Header } from './header';
 export { Footer } from './footer';

 // Usage
 import { Header, Footer } from './components';

• Avoid Circular Dependencies

Understanding Tooling Ecosystem

• Linters: Ensure code quality (e.g., ESLint)
• Formatters: Consistent code style (e.g., Prettier)
• Testing Frameworks: Write tests (e.g., Jest, Mocha)
• Package Managers: Manage dependencies (NPM, Yarn)

Resources for Further Learning

• Official Documentation:
  • Webpack
  • Babel
  • Node.js
• Tutorials and Guides:
  • MDN Web Docs
  • JavaScript.info
• Community Support:
  • Stack Overflow
  • GitHub Repositories

Conclusion

• Modules and tooling are essential for modern JavaScript development
• Improve code organization, maintainability, and scalability
• Continuous learning is key to mastering front-end web architecture