实践NPM打包和使用

Node.js npm包学习项目

这是我用AI开发的两个工程,用于学习如下npm包管理的知识:

  • 如何创建自己的npm包
  • 如何在项目中安装和使用第三方npm包
  • npm包的生命周期管理

🏗️ 项目结构

复制代码
testpackage/
├── my-npm-library/          # 第一个工程:自制npm包
│   ├── src/
│   │   └── index.ts         # TypeScript源码
│   ├── dist/                # 编译后的JavaScript文件
│   ├── package.json         # npm包配置
│   ├── tsconfig.json        # TypeScript配置
│   └── my-simple-lib-1.0.0.tgz  # 打包后的npm包
└── my-consumer-app/         # 第二个工程:消费者应用
    ├── node_modules/        # 依赖包(包括我们自制的包)
    ├── package.json         # 应用配置
    ├── index.js             # 交互式主程序
    └── demo.js              # 自动化演示脚本

🔧 技术栈

  • 语言: TypeScript + JavaScript
  • 模块化: CommonJS
  • 包管理器: npm
  • 运行时: Node.js

📚 实现的功能

1. 自制npm包 (my-simple-lib)

包含了6个实用的数学函数:

  • add(a, b) - 加法运算
  • subtract(a, b) - 减法运算
  • multiply(a, b) - 乘法运算
  • divide(a, b) - 除法运算(含除零保护)
  • factorial(n) - 阶乘运算(含输入校验)
  • isPrime(num) - 质数判断

2. 消费者应用

  • 交互式CLI界面 - 可以通过菜单选择不同的数学运算
  • 自动化演示脚本 - 一次性运行所有功能的测试
  • 错误处理 - 完善的异常捕获和处理机制

🚀 快速开始

步骤1:构建npm包

bash 复制代码
# 进入npm包项目
cd my-npm-library

# 安装依赖
npm install

# 构建TypeScript代码
npm run build

# 打包成tgz文件
npm pack

步骤2:安装和使用npm包

bash 复制代码
# 进入消费者应用
cd ../my-consumer-app

# 安装我们自制的npm包
npm install ../my-npm-library/my-simple-lib-1.0.0.tgz

# 运行自动化演示
npm run demo

# 或者运行交互式程序
npm start

💡 关键知识点

npm包的核心要素

  1. package.json - 定义了包的元数据、依赖关系和脚本
  2. 入口文件 - main字段指定的主文件
  3. 类型声明 - .d.ts文件提供TypeScript支持

包安装的方式

  1. 本地文件安装 - 适用于开发和调试阶段

    json 复制代码
    "dependencies": {
      "my-simple-lib": "file:../my-npm-library/my-simple-lib-1.0.0.tgz"
    }

模块导出和导入

  • 导出 (library端):使用export关键字暴露函数
  • 导入 (consumer端):使用require()import引入模块
js 复制代码
const mathLib = require('my-simple-lib');

console.log("=== 我的简单数学库演示程序 ===\n");

// 测试加法
console.log("📊 加法运算测试:");
console.log(`5 + 3 = ${mathLib.add(5, 3)}`);
console.log(`-2 + 7 = ${mathLib.add(-2, 7)}`);
console.log();
···
### npm安装包时,不止会下载包,还会下载第三方二进制文件
多年前,安装angular是很容易失败的,就是因为安装angular时,会去其它网站下载一些第三方二进制文件。有些网站国内访问不到,就会安装失败。AI说这些年,国内npm镜像对这些网址做了截获,并把高频第三方二进制放到cdn上,缓解了这个问题。
### npm包是如何下载第三方二进制文件的
我们日常执行nodejs代码时,要么用nodejs xxx.js
要么用 npm run  xxx   --这个xxx就是package.json的scripts中的自定义命令
对于常用的高频命令,比如 start、test等,npm还提供了快捷方式,即可以省略run关键字,直接执行npm start

实际上,npm还预设了preinstall,install,postinstall等命令,这些命令在 npm install时会被自动调用。通过下面的这个例子可以验证这几个命令被调用了。但需要打开打印开关,否则看不到打印信息。
npm install  ../my-npm-library/my-simple-lib-1.0.0.tgz --loglevel verbose
或者npm install  ../my-npm-library/my-simple-lib-1.0.0.tgz --ddd
  "scripts": {
    "build": "tsc",
    "preinstall": "echo '【项目】安装前准备工作...'",
    "install": "echo '【项目】安装中...'",
    "postinstall": "echo '【项目】安装后工作,如构建资产...'",
    "prepack": "npm run build"
  },
相关推荐
promiseThen18 分钟前
5 分钟上手 Markdown:标题到表格、代码块与简历实战
前端
web66liang20 分钟前
webpack4+vue2项目使用 sass-embedded 导致的 DockerfIle 构建失败的问题
前端
Strayer23 分钟前
拓扑管网 3D 可视化大屏demo:科技感(地图 + 拓扑 + 3D 空间)
前端·three.js·数据可视化
葬送的代码人生25 分钟前
从 Vue 到 React:Tailwind CSS 布局 + BFF 代理实战
前端·react.js·架构
半个落月27 分钟前
用 LangChain 连接远程 MCP:从工具发现到多轮调用闭环
人工智能·后端·node.js
摸鱼老王不带831 分钟前
不用后端,纯前端读出"网站眼里你的真实出口 IP"——聊聊 Cloudflare 的 cdn-cgi/trace
前端
程序员黑豆42 分钟前
鸿蒙开发入门:Row 和 Column 布局组件详解
前端·harmonyos
hoLzwEge1 小时前
前端环境变量配置指南:.env 文件详解
前端·前端框架
hunterandroid1 小时前
Paging 3 RemoteMediator 实战:构建离线优先的分页列表
android·前端
Underwood_172 小时前
星级评价——了解useState
前端