Display modules in REPL
📦 Node.js-> Command Line
✨ The Prompt Phrase
require('module').builtinModules
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js REPL Magic ✨</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
margin-bottom: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideDown 0.8s ease-out;
}
h1 {
font-size: 3em;
color: #667eea;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.emoji {
font-size: 1.5em;
display: inline-block;
animation: bounce 2s infinite;
}
.section {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
margin-bottom: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: fadeIn 1s ease-out;
transition: transform 0.3s ease;
}
.section:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
h2 {
color: #764ba2;
font-size: 2em;
margin-bottom: 20px;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 20px;
border-radius: 10px;
font-family: 'Courier New', monospace;
font-size: 1.1em;
margin: 20px 0;
position: relative;
overflow-x: auto;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}
.code-block::before {
content: '> ';
color: #4ec9b0;
font-weight: bold;
}
.terminal {
background: #0d1117;
color: #58a6ff;
padding: 25px;
border-radius: 10px;
font-family: 'Courier New', monospace;
margin: 20px 0;
border: 2px solid #30363d;
box-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
}
.prompt {
color: #7ee787;
font-weight: bold;
}
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.module-card {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
padding: 20px;
border-radius: 10px;
color: white;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.module-card:hover {
transform: scale(1.05) rotate(2deg);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.module-card h3 {
font-size: 1.5em;
margin-bottom: 10px;
}
.highlight {
background: linear-gradient(120deg, #ffd700 0%, #ffed4e 100%);
padding: 3px 8px;
border-radius: 5px;
color: #333;
font-weight: bold;
}
.info-box {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 25px;
border-radius: 15px;
margin: 20px 0;
border-left: 5px solid #ffd700;
animation: pulse 2s infinite;
}
.steps {
counter-reset: step-counter;
list-style: none;
}
.steps li {
counter-increment: step-counter;
margin: 20px 0;
padding-left: 60px;
position: relative;
font-size: 1.1em;
}
.steps li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: -5px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.interactive-btn {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2em;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
margin: 10px;
}
.interactive-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.output-area {
background: #f0f0f0;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
min-height: 100px;
display: none;
animation: slideIn 0.5s ease-out;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fun-fact {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
border-left: 5px solid #ff6b6b;
font-style: italic;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 2px solid #ddd;
}
th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
tr:hover {
background: #f5f5f5;
}
.badge {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8em;
margin: 5px;
}
.badge-core {
background: #4caf50;
color: white;
}
.badge-popular {
background: #ff9800;
color: white;
}
.badge-essential {
background: #2196f3;
color: white;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><span class="emoji">🚀</span> Node.js REPL Magic <span class="emoji">✨</span></h1>
<p style="font-size: 1.3em; color: #666; margin-top: 10px;">Discover the Secret Command to Unlock All Modules!</p>
</header>
<div class="section">
<h2>🤔 What is REPL?</h2>
<p style="font-size: 1.1em; line-height: 1.8;">
REPL stands for <span class="highlight">Read-Eval-Print-Loop</span>. It's an interactive programming environment that:
</p>
<div class="module-grid" style="margin-top: 20px;">
<div class="module-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<h3>📖 Reads</h3>
<p>Your input commands</p>
</div>
<div class="module-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<h3>⚡ Evaluates</h3>
<p>Executes the code</p>
</div>
<div class="module-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<h3>🖨️ Prints</h3>
<p>Shows the result</p>
</div>
<div class="module-card" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">
<h3>🔁 Loops</h3>
<p>Waits for next command</p>
</div>
</div>
</div>
<div class="section">
<h2>🎯 The Magic Command</h2>
<div class="info-box">
<h3 style="margin-bottom: 15px; font-size: 1.5em;">💎 Want to see ALL Node.js modules?</h3>
<p style="font-size: 1.2em;">Just launch the REPL and type this magical command:</p>
</div>
<div class="code-block" style="font-size: 1.4em; text-align: center; background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);">
help
</div>
<p style="font-size: 1.1em; margin-top: 20px; line-height: 1.8;">
But wait! There's an even MORE powerful command:
</p>
<div class="code-block" style="font-size: 1.4em; text-align: center; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);">
require('module').builtinModules
</div>
</div>
<div class="section">
<h2>🛠️ How to Launch REPL</h2>
<ol class="steps">
<li>Open your terminal or command prompt 💻</li>
<li>Make sure Node.js is installed (check with <code>node --version</code>) ✅</li>
<li>Type <span class="highlight">node</span> and press Enter 🎹</li>
<li>You'll see the prompt change to <span class="highlight">></span> 🎉</li>
<li>Now you're in REPL mode! Ready to explore! 🚀</li>
</ol>
<div class="terminal">
<div><span class="prompt">$</span> node</div>
<div style="margin-top: 10px; color: #8b949e;">Welcome to Node.js v18.12.0.</div>
<div style="color: #8b949e;">Type ".help" for more information.</div>
<div style="margin-top: 10px;"><span class="prompt">></span> <span style="color: #79c0ff;">require('module').builtinModules</span></div>
</div>
</div>
<div class="section">
<h2>📦 About Built-in Modules</h2>
<p style="font-size: 1.1em; line-height: 1.8; margin-bottom: 20px;">
Node.js comes with a treasure trove of <span class="highlight">built-in modules</span> that provide essential functionality without needing to install anything extra! When you run the command, you'll see an array like this:
</p>
<div class="terminal">
<div><span class="prompt">></span> require('module').builtinModules</div>
<div style="margin-top: 15px; color: #c9d1d9;">[</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'assert',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'buffer',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'child_process',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'crypto',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'fs',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'http',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'path',</div>
<div style="color: #a5d6ff; padding-left: 20px;"> 'stream',</div>
<div style="color: #8b949e; padding-left: 20px;"> ... and many more!</div>
<div style="color: #c9d1d9;">]</div>
</div>
<div class="fun-fact">
<strong>🎨 Fun Fact:</strong> Node.js has over 30 built-in modules! Each one is like a superhero with special powers to help you build amazing applications! 🦸♂️
</div>
</div>
<div class="section">
<h2>🌟 Popular Built-in Modules</h2>
<table>
<thead>
<tr>
<th>Module</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>fs</strong></td>
<td>📁 File System - Read, write, and manage files</td>
<td><span class="badge badge-essential">Essential</span></td>
</tr>
<tr>
<td><strong>http</strong></td>
<td>🌐 Create web servers and handle HTTP requests</td>
<td><span class="badge badge-popular">Popular</span></td>
</tr>
<tr>
<td><strong>path</strong></td>
<td>🗺️ Work with file and directory paths</td>
<td><span class="badge badge-core">Core</span></td>
</tr>
<tr>
<td><strong>crypto</strong></td>
<td>🔐 Cryptographic functionality and security</td>
<td><span class="badge badge-essential">Essential</span></td>
</tr>
<tr>
<td><strong>os</strong></td>
<td>💻 Operating system information</td>
<td><span class="badge badge-core">Core</span></td>
</tr>
<tr>
<td><strong>events</strong></td>
<td>🎪 Event emitter for handling events</td>
<td><span class="badge badge-popular">Popular</span></td>
</tr>
<tr>
<td><strong>stream</strong></td>
<td>🌊 Handle streaming data efficiently</td>
<td><span class="badge badge-essential">Essential</span></td>
</tr>
<tr>
<td><strong>util</strong></td>
<td>🔧 Utility functions for development</td>
<td><span class="badge badge-core">Core</span></td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<h2>🎮 Interactive Demo</h2>
<p style="font-size: 1.1em; margin-bottom: 20px;">Click the button below to see what the command returns!</p>
<div style="text-align: center;">
<button class="interactive-btn" onclick="showModules()">🎯 Show Built-in Modules</button>
<button class="interactive-btn" onclick="showModuleDetails()" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">📖 Module Details</button>
<button class="interactive-btn" onclick="showFunFacts()" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">💡 Fun Facts</button>
</div>
<div class="output-area" id="outputArea"></div>
</div>
<div class="section">
<h2>🧠 What Does This Response Mean?</h2>
<div class="info-box" style="animation: none;">
<p style="font-size: 1.1em; line-height: 1.8;">
When you run <code style="background: rgba(255,255,255,0.2); padding: 3px 8px; border-radius: 5px;">require('module').builtinModules</code>, you get:
</p>
</div>
<div class="module-grid">
<div class="module-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<h3>📋 An Array</h3>
<p>A list of all available built-in modules</p>
</div>
<div class="module-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<h3>✅ Ready to Use</h3>
<p>All modules ready without installation</p>
</div>
<div class="module-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<h3>🎯 Direct Access</h3>
<p>Can be required immediately in your code</p>
</div>
<div class="module-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<h3>📚 Documentation</h3>
<p>Each has full API documentation</p>
</div>
</div>
<div class="fun-fact" style="margin-top: 30px;">
<strong>💡 Pro Tip:</strong> You can also use <code>Object.keys(process.binding('natives'))</code> to see even MORE internal modules, but stick with <code>builtinModules</code> for production code! 🎓
</div>
</div>
<div class="section" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<h2 style="color: white; border-bottom-color: white;">🎓 Key Takeaways</h2>
<ul style="font-size: 1.1em; line-height: 2; list-style: none; padding-left: 0;">
<li>✨ <strong>REPL</strong> is your interactive Node.js playground</li>
<li>🔍 <code>require('module').builtinModules</code> reveals all built-in modules</li>
<li>📦 Built-in modules are pre-installed with Node.js</li>
<li>🚀 No npm install needed for these modules</li>
<li>💪 They provide core functionality for Node.js development</li>
<li>🎯 Access them directly using <code>require('moduleName')</code></li>
</ul>
</div>
</div>
<script>
const builtinModules = [
'assert', 'buffer', 'child_process', 'cluster', 'console', 'constants',
'crypto', 'dgram', 'dns', 'domain', 'events', 'fs', 'http', 'http2',
'https', 'inspector', 'module', 'net', 'os', 'path', 'perf_hooks',
'process', 'punycode', 'querystring', 'readline', 'repl', 'stream',
'string_decoder', 'timers', 'tls', 'trace_events', 'tty', 'url',
'util', 'v8', 'vm', 'wasi', 'worker_threads', 'zlib'
];
function showModules() {
const output = document.getElementById('outputArea');
output.style.display = 'block';
output.innerHTML = `
<h3 style="color: #667eea; margin-bottom: 15px;">🎉 Built-in Modules Array:</h3>
<div style="background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 10px; font-family: monospace;">
<div style="color: #4ec9b0;">[</div>
${builtinModules.map(mod => `<div style="padding-left: 20px; color: #ce9178;">'${mod}',</div>`).join('')}
<div style="color: #4ec9b0;">]</div>
</div>
<p style="margin-top: 15px; font-size: 1.1em; color: #666;">
<strong>Total Modules: ${builtinModules.length}</strong> 🎊
</p>
`;
}
function showModuleDetails() {
const output = document.getElementById('outputArea');
output.style.display = 'block';
const details = {
'fs': 'File System operations - reading, writing, deleting files 📁',
'http': 'Creating web servers and making HTTP requests 🌐',
'path': 'Handling and transforming file paths 🗺️',
'crypto': 'Cryptographic functionality including hashing and encryption 🔐',
'events': 'Event-driven architecture with EventEmitter 🎪',
'stream': 'Working with streaming data efficiently 🌊',
'os': 'Information about the operating system 💻',
'util': 'Utility functions for developers 🔧'
};
let html = '<h3 style="color: #667eea; margin-bottom: 15px;">📚 Module Details:</h3>';
for (let [module, desc] of Object.entries(details)) {
html += `
<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white; padding: 15px; margin: 10px 0; border-radius: 8px;
animation: slideIn 0.5s ease-out;">
<strong style="font-size: 1.2em;">${module}</strong><br>
${desc}
</div>
`;
}
output.innerHTML = html;
}
function showFunFacts() {
const facts = [
"🌟 Node.js was created by Ryan Dahl in 2009!",
"⚡ The 'fs' module is one of the most used built-in modules!",
"🎯 You can create an HTTP server in just 5 lines of code!",
"🚀 Node.js uses the V8 JavaScript engine (same as Chrome)!",
"💚 Node.js logo is green because of its eco-friendly asynchronous nature!",
"🎪 EventEmitter is the foundation of many Node.js modules!",
"🔥 Node.js can handle thousands of concurrent connections!",
"📦 NPM has over 1.5 million packages, but built-in modules are always there!"
];
const output = document.getElementById('outputArea');
output.style.display = 'block';
const randomFact = facts[Math.floor(Math.random() * facts.length)];
output.innerHTML = `
<h3 style="color: #667eea; margin-bottom: 15px;">💡 Node.js Fun Facts!</h3>
<div style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
padding: 30px; border-radius: 15px; font-size: 1.3em;
text-align: center; border-left: 5px solid #ff6b6b;
animation: pulse 1s ease-out;">
${randomFact}
</div>
<p style="text-align: center; margin-top: 20px; color: #666;">
<em>Click again for another fact! 🎲</em>
</p>
`;
}
// Add some sparkle effects
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.section');
sections.forEach((section, index) => {
section.style.animationDelay = `${index * 0.1}s`;
});
});
</script>
</body>
</html>
Live Preview