Skip to content

6.2 Build System and Tooling

Jump to bottom
ankrypht edited this page Jul 16, 2025 · 1 revision

Page: Build System and Tooling

Build System and Tooling

Relevant source files

The following files were used as context for generating this wiki page:

This document covers the build system configuration, bundling setup, and development tooling used in AudioScape. It focuses on Metro bundler configuration, TypeScript compilation, linting setup, and the JavaScript transpilation pipeline. For overall project dependencies and EAS build configuration, see Project Configuration. For static assets handling, see Assets and Resources.

Metro Bundler Configuration

AudioScape uses Metro as its primary JavaScript bundler, configured through metro.config.js. The configuration extends Expo's default Metro setup with several customizations for the project's specific needs.

graph TB
    subgraph "Metro Bundler Pipeline"
        CONFIG["metro.config.js"]
        EXPO_DEFAULT["getDefaultConfig()"]
        RESOLVER["Resolver Configuration"]
        SOURCEMAP["Source Extension Mapping"]
        BLOCKLIST["File Exclusion Rules"]
    end
    
    subgraph "File Processing"
        TS_FILES["TypeScript Files (.ts, .tsx)"]
        DTS_FILES["Declaration Files (.d.ts)"]
        JS_FILES["JavaScript Files (.js, .jsx)"]
        DOCS_EXCLUDED["docs/ Directory (Excluded)"]
    end
    
    subgraph "Output"
        BUNDLE["JavaScript Bundle"]
        SOURCEMAPS["Source Maps"]
    end
    
    CONFIG --> EXPO_DEFAULT
    CONFIG --> RESOLVER
    CONFIG --> SOURCEMAP
    CONFIG --> BLOCKLIST
    
    RESOLVER --> TS_FILES
    SOURCEMAP --> DTS_FILES
    BLOCKLIST --> DOCS_EXCLUDED
    
    TS_FILES --> BUNDLE
    DTS_FILES --> BUNDLE
    JS_FILES --> BUNDLE
    
    BUNDLE --> SOURCEMAPS
Loading

Metro Configuration Details

The Metro configuration enables several key features:

  • Package Exports Support: config.resolver.unstable_enablePackageExports = true enables modern package.json exports field support
  • TypeScript Declaration Files: config.resolver.sourceExts.push("d.ts") adds support for TypeScript declaration files in the resolver
  • Documentation Exclusion: config.resolver.blockList = exclusionList([/\/docs\/.*/]) prevents the docs directory from being included in bundles

Sources: metro.config.js:1-11

TypeScript Configuration

AudioScape uses TypeScript with strict type checking enabled. The TypeScript configuration extends Expo's base configuration while adding project-specific compiler options.

graph LR
    subgraph "TypeScript Compilation"
        TSCONFIG["tsconfig.json"]
        EXPO_BASE["expo/tsconfig.base"]
        COMPILER_OPTS["Compiler Options"]
        PATH_MAPPING["Path Mapping"]
    end
    
    subgraph "Source Files"
        TS_SRC["**/*.ts"]
        TSX_SRC["**/*.tsx"] 
        EXPO_TYPES[".expo/types/**/*.ts"]
        ENV_TYPES["expo-env.d.ts"]
    end
    
    subgraph "Compilation Features"
        STRICT_MODE["Strict Type Checking"]
        DOM_LIB["DOM Library Support"]
        ALIAS_RESOLUTION["@/* Path Aliases"]
    end
    
    TSCONFIG --> EXPO_BASE
    TSCONFIG --> COMPILER_OPTS
    COMPILER_OPTS --> STRICT_MODE
    COMPILER_OPTS --> DOM_LIB
    COMPILER_OPTS --> PATH_MAPPING
    PATH_MAPPING --> ALIAS_RESOLUTION
    
    TS_SRC --> TSCONFIG
    TSX_SRC --> TSCONFIG
    EXPO_TYPES --> TSCONFIG
    ENV_TYPES --> TSCONFIG
Loading

Key TypeScript Features:

  • Strict Mode: "strict": true enables all strict type checking options
  • DOM Library: "lib": ["dom"] provides DOM type definitions for web compatibility
  • Path Aliases: "@/*": ["./*"] enables absolute imports using the @/ prefix
  • Expo Integration: Includes Expo-generated type definitions and environment types

Sources: tsconfig.json:1-11

Code Quality and Linting

ESLint is configured to maintain code quality standards across the project using Expo's recommended configuration.

Configuration Value Purpose
extends "expo" Uses Expo's ESLint configuration preset
ignorePatterns ["docs/"] Excludes documentation from linting

The ESLint configuration leverages Expo's preset which includes:

  • React and React Native specific rules
  • JavaScript ES6+ syntax support
  • TypeScript integration
  • Accessibility linting rules

Sources: .eslintrc.js:1-4

JavaScript Transpilation Pipeline

AudioScape uses Babel for JavaScript transpilation, with configuration managed through package dependencies. The Babel pipeline handles modern JavaScript features and React Native specific transformations.

graph TB
    subgraph "Babel Transpilation"
        BABEL_CORE["@babel/core"]
        PLUGIN_SYNTAX["Syntax Plugins"]
        PLUGIN_TRANSFORM["Transform Plugins"]
        BABEL_CONFIG["Babel Configuration"]
    end
    
    subgraph "Key Babel Plugins"
        DECORATORS["@babel/plugin-proposal-decorators"]
        EXPORT_DEFAULT["@babel/plugin-proposal-export-default-from"]
        CLASS_PROPS["@babel/plugin-proposal-class-properties"]
        NULLISH["@babel/plugin-proposal-nullish-coalescing-operator"]
        OPTIONAL_CHAIN["@babel/plugin-proposal-optional-chaining"]
        DOTENV["babel-plugin-dotenv-import"]
    end
    
    subgraph "Transform Features"
        MODERN_JS["Modern JavaScript Features"]
        REACT_NATIVE["React Native Transformations"]
        ENV_VARS["Environment Variable Injection"]
        ASYNC_AWAIT["Async/Await Support"]
    end
    
    BABEL_CORE --> PLUGIN_SYNTAX
    BABEL_CORE --> PLUGIN_TRANSFORM
    
    DECORATORS --> MODERN_JS
    EXPORT_DEFAULT --> MODERN_JS
    CLASS_PROPS --> MODERN_JS
    NULLISH --> MODERN_JS
    OPTIONAL_CHAIN --> MODERN_JS
    DOTENV --> ENV_VARS
    
    PLUGIN_TRANSFORM --> REACT_NATIVE
    PLUGIN_TRANSFORM --> ASYNC_AWAIT
Loading

Babel Plugin Configuration:

The project includes several Babel plugins for modern JavaScript feature support:

  • Decorators: Enables experimental decorator syntax for future language features
  • Export Extensions: Supports export from syntax for cleaner module exports
  • Class Properties: Enables class property syntax without constructor assignment
  • Nullish Coalescing: Supports ?? operator for null/undefined handling
  • Optional Chaining: Enables ?. operator for safe property access
  • Environment Variables: babel-plugin-dotenv-import injects environment variables at build time

Sources: package-lock.json:57-72

Development Tooling

AudioScape includes several development tools to enhance the development experience and maintain code quality.

Tool Package Purpose
TypeScript Compiler typescript@^5.7.3 Type checking and compilation
Type Documentation typedoc@^0.28.7 Generates API documentation from TypeScript
GitHub Theme typedoc-github-theme@^0.3.0 Custom theme for generated documentation
Bundle Analyzer expo-atlas@^0.4.1 Analyzes bundle size and dependencies

Documentation Generation:

The project uses TypeDoc for generating API documentation from TypeScript source code:

  • TypeDoc: Automatically generates documentation from TypeScript comments and type annotations
  • GitHub Theme: Provides a GitHub-compatible theme for the generated documentation

Bundle Analysis:

Expo Atlas provides bundle analysis capabilities to monitor application size and identify optimization opportunities.

Sources: package-lock.json:69-71

Build Process Integration

The build system integrates with Expo's development and production build pipeline, providing hot reloading during development and optimized bundles for production.

graph LR
    subgraph "Development Mode"
        DEV_SERVER["Metro Dev Server"]
        HOT_RELOAD["Hot Reloading"]
        FAST_REFRESH["Fast Refresh"]
        SOURCE_MAPS["Source Maps"]
    end
    
    subgraph "Production Build"
        BUNDLE_OPT["Bundle Optimization"]
        MINIFICATION["Code Minification"]
        TREE_SHAKE["Tree Shaking"]
        ASSET_OPT["Asset Optimization"]
    end
    
    subgraph "Build Pipeline"
        TYPESCRIPT["TypeScript Compilation"]
        BABEL["Babel Transpilation"] 
        METRO["Metro Bundling"]
        EXPO_BUILD["Expo Build Process"]
    end
    
    TYPESCRIPT --> BABEL
    BABEL --> METRO
    METRO --> DEV_SERVER
    METRO --> BUNDLE_OPT
    
    DEV_SERVER --> HOT_RELOAD
    DEV_SERVER --> FAST_REFRESH
    DEV_SERVER --> SOURCE_MAPS
    
    BUNDLE_OPT --> MINIFICATION
    BUNDLE_OPT --> TREE_SHAKE
    BUNDLE_OPT --> ASSET_OPT
    
    EXPO_BUILD --> BUNDLE_OPT
Loading

The build process provides different behaviors for development and production environments:

Development Features:

  • Hot module reloading for instant code updates
  • Fast refresh for React component changes
  • Detailed source maps for debugging
  • Unminified code for easier debugging

Production Optimizations:

  • Dead code elimination through tree shaking
  • JavaScript minification for smaller bundle sizes
  • Asset optimization and compression
  • Source map generation for error tracking

Sources: metro.config.js:1-11, tsconfig.json:1-11, package-lock.json:57-72

Clone this wiki locally