fadeaway-axios发包

110 阅读3分钟

下列是将 axios 封装成一个 npm 包并发布到 npm 仓库的过程,下面是详细的步骤:

步骤 1: 准备项目

创建项目目录

mkdir fadeaway-axios
cd fadeaway-axios

初始化 npm 项目
运行 npm initnpm init -y(自动接受默认设置)来创建一个新的 package.json 文件。

npm init -y

安装依赖
由于封装依赖于 axios,需要将其作为依赖安装。

npm install axios

创建和编辑代码
axios.ts 文件放入src目录中,再在根目录建立index.ts

步骤 2: 配置 package.json

编辑 package.json 以确保所有必要的字段都被正确设置:

  • name:包的名称(必须唯一于 npm 仓库)。
  • version:开始总是从 1.0.00.1.0 开始。
  • main:指向您的主入口文件,通常是编译后的 JavaScript 文件(例如 dist/index.js)。
  • types:指向您的类型声明文件(如果您的包支持 TypeScript)。
  • scripts:构建和测试脚本。
  • repository:您的代码仓库地址。
  • keywordsauthorlicense 等其他有用信息。

例如:

{
  "name": "fadeaway-axios",
  "version": "1.0.4",
  "description": "",
  "main": "dist/axios.js",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "Sky",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.7.4",
    "typescript": "^5.5.4"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/SkyWongHZ/fadeway-axios.git"
  },
  "homepage": "https://github.com/SkyWongHZ/fadeway-axios.git#readme"
 
}

package.json 中,确保设置了正确的入口点和类型声明文件指向:

{
  "main": "dist/axios.js",
  "types": "dist/axios.d.ts", // 确保指向正确的声明文件
  ...
}

可选: 在 package.json 中添加编译脚本

为了简化编译过程,您可以在 package.json 文件的 scripts 部分添加一个脚本来运行 tsc

"scripts": {
  "build": "tsc"
}

这样,您就可以通过运行以下命令来编译项目:

npm run build

这将触发 tsc 命令,根据 tsconfig.json 的配置编译 TypeScript 文件

步骤 3: 构建您的代码

如果使用 TypeScript 或需要转译代码(例如使用 Babel),则需要构建代码:

  1. 安装 TypeScript(如果使用):
npm install typescript --save-dev

配置 TypeScripttsconfig.json):创建一个 tsconfig.json 文件来指定编译选项。

首先,您需要一个 tsconfig.json 文件来指定 TypeScript 编译器的行为。如果您还没有这个文件,可以通过以下命令创建一个:

npx tsc --init

接下来,修改 tsconfig.json 文件以包含以下关键配置:

{
  "compilerOptions": {
    "target": "es2015",
    "lib": ["es2015", "dom"],
    "outDir": "./dist",
    "module": "commonjs",
    "declaration": true,
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

这里的 outDir 选项指定了 TypeScript 编译器应该将编译后的 JavaScript 文件放置在哪个目录。 rootDir 是源文件的根目录,这帮助 TypeScript 确定如何生成输出结构。


一旦 tsconfig.json 配置完毕,您可以使用以下命令来编译您的 TypeScript 文件

npx tsc

这个命令会根据 tsconfig.json 中的设置查找 src 目录下的所有 TypeScript 文件,编译它们,并将生成的 JavaScript 文件以及 .d.ts 文件放在 dist 目录中。

步骤 4: 发布到 npm

发包的时候注意本地镜像源是npm还是cnpm

1. 临时切换 npm 镜像源

您可以使用以下命令临时切换到官方 npm 镜像源进行登录操作:

npm login --registry=https://registry.npmjs.org

这条命令只会临时使用官方源进行登录操作,并不会更改全局的 npm 配置。登录完成后,您仍然会使用 cnpm 镜像源

  1. 发布包
npm publish 

如果您的包是公开的,使用 npm publish 即可。如果您想发布为私有包,使用 npm publish --access=restricted

步骤 5: 管理和维护

  • 更新包:对代码进行修改后,更新 version 字段,然后重新发布。
  • 处理问题和拉取请求:保持与社区的良好互动。

通过这些步骤,您可以成功地将您的 axios 封装发布为一个 npm 包,供他人使用和贡献。