当前位置：首页 > article >正文

npm前端模块化编程

article 2026/2/23 0:51:47

1. 代码编写

使用npm和Webpack进行前端模块化编程的完整案例。这个案例将创建一个简单的网页，该网页显示一个标题和一个按钮，点击按钮会在控制台中打印一条消息。

步骤 1: 初始化项目

创建项目目录并初始化npm：

mkdir my-modular-frontend
cd my-modular-frontend
npm init -y

步骤 2: 安装Webpack和相关依赖

安装Webpack和Webpack CLI：

npm install --save-dev webpack webpack-cli

步骤 3: 创建项目结构

你的项目结构可能如下所示：

my-modular-frontend/
│
├── src/
│   ├── index.js
│   ├── components/
│   │   ├── Button.js
│   │   └── Header.js
│
├── public/
│   └── index.html
│
├── webpack.config.js
└── package.json

步骤 4: 编写模块代码

在 src/components/Header.js 中：

export function createHeader() {const header = document.createElement('h1');header.textContent = 'Welcome to My Modular Frontend';document.body.appendChild(header);
}

在 src/components/Button.js 中：

export function createButton() {const button = document.createElement('button');button.textContent = 'Click Me';button.onclick = () => console.log('Button clicked!');document.body.appendChild(button);
}

在 src/index.js 中：

import { createHeader } from './components/Header';
import { createButton } from './components/Button';
document.addEventListener('DOMContentLoaded', () => {createHeader();createButton();
});

步骤 5: 配置Webpack

创建 webpack.config.js：

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

步骤 6: 编写打包脚本

在 package.json 中添加一个脚本：

"scripts": {"build": "webpack --mode development"
}

步骤 7: 创建HTML文件

在 public/index.html 中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>My Modular Frontend</title>
</head>
<body><script src="bundle.js"></script>
</body>
</html>

步骤 8: 打包项目

运行以下命令来打包你的项目：

npm run build

步骤 9: 运行项目

在浏览器中打开 public/index.html 文件。你应该会看到一个标题和一个按钮。点击按钮，控制台将显示一条消息。
这个案例展示了如何使用npm和Webpack来模块化地构建前端项目。你可以根据需要添加更多的模块和功能。

2. 运行

使用Webpack Dev Server

如果你在开发模式下工作，Webpack Dev Server是一个很好的选择，因为它可以实时重新加载你的应用。

安装Webpack Dev Server：

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

修改你的webpack.config.js来包含dev server的配置：

module.exports = {// ...其他配置...devServer: {static: path.join(__dirname, 'public'),compress: true,port: 9000,// ... 其他 devServer 配置 ...},
};

在package.json中添加一个启动脚本：

"scripts": {"start": "webpack serve --open"
}

运行你的应用：

npm start

这将启动Webpack Dev Server，并在默认浏览器中打开你的应用。

npm前端模块化编程

1. 代码编写使用npm和Webpack进行前端模块化编程的完整案例。这个案例将创建一个简单的网页，该网页显示一个标题和一个按钮，点击按钮会在控制台中打印一条消息。步骤 1: 初始化项目创建项目目录并初始化npm： mkdir my-modular-fronten…...

编程日记 2025/12/26 4:43:34

Django REST framework 源码剖析-认证器详解(Authentication)

Django REST framework 源码剖析-认证器详解(Authentication) 身份验证始终在视图的最开始运行，在权限和限制检查发生之前，以及在允许任何其他代码继续之前。request.user属性通常设置为contrib.auth包的user类的实例。request.auth属性用于任何其他身份…...

编程日记 2026/2/19 16:52:06

TCP/IP三次握手的过程，为什么要3次？

一：过程第一次（SYN）： 客户端发送一个带有SYN标志的TCP报文段给服务器，设置SYN1，并携带初始序列号Seqx（随机值），进入SYN_SENT状态。等待服务器相应。第二次&#xff08…...

编程日记 2026/2/22 18:13:30

Centos6安装nerdctl容器运行时

Centos6安装nerdctl容器运行时前言Centos6安装docker---失败--不可拉取镜像docker配置国内镜像加速 Centos6安装nerdctl-full容器管理工具为Centos6配置containerd服务开机自启动设置nerdctl自动补全前言本文写于2025年3月22日,因一些特殊业务需要用到Centos6Docker,但Cent…...

编程日记 2026/2/16 17:29:40

登录验证码的接口实习，uuid,code.

UID是唯一标识的字符串,下面是百度百科关于UUID的定义： UUID是由一组32位数的16进制数字所构成，是故UUID理论上的总数为16322128，约等于3.4 x 10^38。也就是说若每纳秒产生1兆个UUID，要花100亿年才会将所有UUID用完。 UUID的标准…...

编程日记 2026/2/15 5:36:56

用fofa语法搜索漏洞

FOFA是一款非常强大的搜索引擎关于对于fofa的描述是：FOFA（网络空间资产检索系统）是世界上数据覆盖更完整的IT设备搜索引擎，拥有全球联网IT设备更全的DNA信息。探索全球互联网的资产信息，进行资产及漏洞影响范围分析…...

编程日记 2026/2/18 10:07:14

设计一个基于机器学习的光伏发电功率预测模型，以Python和Scikit - learn库为例

下面为你设计一个基于机器学习的光伏发电功率预测模型，以Python和Scikit - learn库为例。此模型借助历史气象数据和光伏发电功率数据来预测未来的光伏发电功率。模型设计思路数据收集：收集历史气象数据（像温度、光照强度、湿度等&#xf…...

编程日记 2025/12/17 14:15:27

20242817李臻《Linux⾼级编程实践》第6周

20242817李臻《Linux⾼级编程实践》第6周一、AI对学习内容的总结 Linux进程间通信（IPC） 1. 进程间通信基本概念作用: 数据传输：进程间传递数据（字节到兆字节级别）。共享数据：多个进程操作同一数据&…...

编程日记 2026/2/13 23:30:10

Vue 3中的Provide与Inject

在Vue 3中，provide和inject机制为组件间的通信提供了一种新的方式。不同于传统的父子组件通过props传递数据的方式，provide和inject允许祖先组件向其所有子孙组件提供数据，而无需通过中间层手动传递。这使得跨层级的组件通信变得更加直接和简…...

编程日记 2026/1/8 12:05:25

深入解析SQL2API平台：数据交互革新者

在数字化转型持续深入的当下，企业对数据的高效利用与管理的需求愈发迫切。SQL2API平台应运而生，成为助力企业突破数据交互困境的有力工具，特别是它由麦聪软件基于DaaS（数据即服务）产品创新衍生而来，备受业界…...

编程日记 2026/2/15 3:36:27

蓝桥杯算法题分享（二）

蓝桥杯算法题分享本文将继续分享三道经典的蓝桥杯算法题，包括题目描述、解题思路和 Java 代码实现，帮助大家更好地理解算法的应用。对算法感兴趣的朋友可以点开我的主页查看我上周分享的另三道题。第一题：次数差题目描述 x 星球有 26 只…...

编程日记 2026/2/6 13:26:36

实战-MySQL5.7升级8.0遇到的四个问题

近期几个项目的MySQL由5.7升级到8.0，升级过程中遇到四个问题，记录下来分享一下： 第一个问题详见之前的文章： MySQL 5.7升级8.0报异常：处理新增关键字第二个问题详见之前的文章： MySQL 5.7升级8.0报异常…...

编程日记 2025/9/13 10:39:27

为什么递归用栈？动态分配用堆？

文章目录 1. 区别2. 栈空间特点优点缺点 3. 堆空间特点优点缺点 4. 栈和堆的对比5. 总结 1. 区别栈空间和堆空间是程序内存中的两块不同区域，分别用于不同的用途。栈空间： 栈空间是由操作系统自动管理的内存区域，用于存储局部变量、函数…...

编程日记 2026/2/12 19:43:00

Java 中装饰者模式与策略模式在埋点系统中的应用

前言在软件开发中，装饰者模式和策略模式是两种常用的设计模式，它们在特定的业务场景下能够发挥巨大的作用。本文将通过一个实际的埋点系统案例，探讨如何在 Java 中运用装饰者模式和策略模式，以及如何结合工厂方法模式来优化代码…...

编程日记 2026/2/21 16:42:37

计算机视觉总结

以下是针对上述问题的详细解答，并结合代码示例进行说明： 1. 改进YOLOv5人脸检测模块，复杂光照场景准确率从98.2%提升至99.5% 优化具体过程：光照补偿：在数据预处理阶段，采用自适应光照补偿算法，对图像进行实时增强，以减少光照变化对人脸检测的影响。数据增强：在训练…...

编程日记 2026/1/24 14:10:42

无人设备遥控器之调度自动化技术篇

一、技术原理信息采集与处理： 通过传感器、仪表等设备采集无人设备的各种数据，如位置、速度、状态等。将采集到的数据传输到调度自动化系统中进行处理和分析，以获取设备的实时状态。系统建模与优化： 调度自动化系统会根据…...

编程日记 2026/2/14 5:51:35

【AI】Orin Nano+ubuntu22.04上移植YoloV11，并使用DeepStream测试成功

【AI】郭老二博文之：AI学习目录汇总 1、准备工作使用 sdk-manager 烧写 OrinNano， JetPack版本为6.0 DP，对应操作系统为：Ubuntu22.04 参见博客：【NVIDIA】Jetson Orin Nano系列：烧写Ubuntu22.04 2、安装 PyTorch 2.1 下载依赖 1）安装onnx pip install onnx -i h…...

编程日记 2026/2/14 3:33:23

K8S学习之基础四十五：k8s中部署elasticsearch

k8s中部署elasticsearch 安装并启动nfs服务yum install nfs-utils -y systemctl start nfs systemctl enable nfs.service mkdir /data/v1 -p echo /data/v1 *(rw,no_root_squash) >> /etc/exports exports -arv systemctl restart nfs创建运行nfs-provisioner需要的sa账…...

编程日记 2026/2/18 6:09:58

如何在 Windows 上安装并使用 Postman？

Postman 是一个功能强大的API测试工具，它可以帮助程序员更轻松地测试和调试 API。在本文中，我们将讨论如何在 Windows 上安装和使用 Postman。 Windows 如何安装和使用 Postman 教程？...

编程日记 2026/2/18 21:34:17

Langchain 提示词(Prompt)

基本用法 1. 基本概念提示词模板是一个字符串模板，其中包含一些占位符（通常是 {variable} 形式的），这些占位符可以在运行时被实际值替换。LangChain 提供了多种类型的提示词模板，以适应不同的使用场景。 2. 主要类…...

编程日记 2026/2/15 23:40:48

什么是PHP伪协议

PHP伪协议是一种特殊的URL格式，允许开发者以不同于传统文件路径访问和操作资源。以下是一些常见的PHP伪协议及其详细介绍： 常见的PHP伪协议 1. **file://** - **用途**：访问本地文件系统。 - **示例**：file:///path/to/file.txt。…...

编程日记 2025/4/10 8:35:09

python脚本处理excel文件

1.对比perl和python 分别尝试用perl和python处理excel文件，发现perl的比较复杂，比如说read excel就有很多方式 Spreadsheet::Read use Spreadsheet::ParseExcel 不同的method，对应的取sheet的cell方式也不一样。更复杂的是处理含有中文内…...

编程日记 2025/5/28 10:09:39

【腾讯云架构师技术沙龙2025.03.22】

大模型技术演进与行业影响分析日期：2025年3月22日主讲人：李建忠《DeepSeek实战驱动行业智变—AI应用寒武纪》整理：飞书语音转化DeepSeek分析汇总一、技术演进：从快思考到慢思考 1. 早期争议与能力局限（2022-202…...

编程日记 2026/2/15 9:21:35

【SOC 芯片设计 DFT 学习专栏 -- IDDQ 测试与 Burn-In 测试】

文章目录 IDDQ 测试与 Burn-In 测试IDDQ 测试工作原理测试过程优点局限性示例 2. Burn-In 测试工作原理测试过程优点局限性示例总结对比 IDDQ 测试和 Burn-in 测试： IDDQ 测试与 Burn-In 测试本文将详细介绍 DFT 中 IDDQ测试和 burn-in测试模式 IDDQ 测试 IDD…...

编程日记 2026/2/14 1:09:58

Axure RP 9.0教程: 基于动态面板的元件跟随来实现【音量滑块】

文章目录引言I 音量滑块的实现步骤添加底层边框添加覆盖层基于覆盖层创建动态面板添加滑块按钮设置滑块拖动效果引言音量滑块在播放器类APP应用场景相对较广，例如调节视频的亮度、声音等等。 I 音量滑块的实现步骤添加底层边框在画布中添加一个矩形框：500 x 32，圆…...

编程日记 2026/2/14 17:20:11

JS—call,apply,bind：1分钟掌握三者的区别

个人博客：haichenyi.com。感谢关注一. 目录一–目录二–call三–apply四–bind五–三者对比二. call 作用： 立即调用函数，显式指定this值，并逐个传递参数。语法： func.call(thisArg, arg1, arg2, …) 特点&…...

编程日记 2025/6/11 2:23:34

Linux TTY设备汇总

目录 1. ‌tty（终端设备统称） 2. ‌ptm（伪终端主设备）与pts（伪终端从设备） 3. ‌ttys（串行端口终端） 4. ‌ttyACM（USB CDC ACM设备） 5. ‌ttyGS（USB Gadget Serial设备）主要联系‌ ‌典型应用场景‌ TTY_CORE: drivers/tty/tty_io.c:tty_register_driver…...

编程日记 2026/2/13 16:02:29