Módulos e Ferramentas

Módulos ES6

Módulos permitem organizar código em arquivos independentes com escopo isolado.

Export e Import

// utils/formatacao.js
export function formatarMoeda(valor) {
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
  }).format(valor);
}

export function formatarData(data) {
  return new Intl.DateTimeFormat('pt-BR').format(new Date(data));
}

export default function log(mensagem) {
  console.log(`[LOG] ${new Date().toISOString()}: ${mensagem}`);
}

// app.js
import log, { formatarMoeda, formatarData } from './utils/formatacao.js';

import { formatarMoeda as moeda } from './utils/formatacao.js';

import * as fmt from './utils/formatacao.js';

console.log(moeda(1500));
console.log(formatarData('2026-01-15'));
log('Aplicacao iniciada');

Dynamic Import

async function carregarGraficos() {
  try {
    const modulo = await import('./utils/graficos.js');
    modulo.inicializarGrafico('canvas-principal');
  } catch (erro) {
    console.error('Falha ao carregar modulo de graficos:', erro);
  }
}

document.querySelector('#btn-grafico')
  .addEventListener('click', carregarGraficos);

Modulos no HTML

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

CommonJS vs ES Modules

// CommonJS (Node.js)
const soma = (a, b) => a + b;
module.exports = { soma, PI: 3.14 };

// index.cjs
const { soma } = require('./utils/matematica.cjs');
console.log(soma(2, 3));

// ES Modules (package.json: "type": "module")
// Usa import/export

Bundlers

Vite

npm create vite@latest meu-app -- --template vanilla
cd meu-app
npm install
npm run dev
npm run build

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'terser'
  }
});

npm Basico

# Iniciar projeto
npm init -y

# Instalar dependencia
npm install lodash

# Instalar dependencia de desenvolvimento
npm install --save-dev eslint

# Executar script
npm run build

# Scripts em package.json
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint src/"
}

Lab: Projeto com Modulos ES6

Crie um projeto com Vite, organize funcoes em modulos separados e use import/export.

npm create vite@latest calculadora -- --template vanilla
cd calculadora
npm install
npm run dev

Modulos ES6 sao o padrao moderno do JavaScript. Use import/export, Vite para desenvolvimento e npm para gerenciar dependencias.