如何上传自己的npm包

文章目录

  • 一、创建项目
    • [1.1 第一步注册](#1.1 第一步注册)
    • [1.2 第二步初始化](#1.2 第二步初始化)
    • [1.3 第三步登录](#1.3 第三步登录)
    • [1.4 更改镜像](#1.4 更改镜像)
    • [1.5 上传](#1.5 上传)
    • [1.6 更新上传后的npm包](#1.6 更新上传后的npm包)
  • 二、编写代码
    • [2.1 新建一个文件夹](#2.1 新建一个文件夹)
    • [2.2 初始化](#2.2 初始化)
    • [2.3 package.json配置](#2.3 package.json配置)
    • [2.4 安装依赖模块](#2.4 安装依赖模块)
    • [2.5 创建index.js文件](#2.5 创建index.js文件)
    • [2.6 测试](#2.6 测试)
    • [2.7 上传](#2.7 上传)

npm是什么?

npm是JavaScript软件包管理器,它允许开发人员在项目中方便地安装、发布和共享代码库。可以将其视为一个类似于应用商店的工具,可以帮助开发人员快速地找到、安装和更新他们需要的代码库。

一、创建项目

1.1 第一步注册

去npm的官方网站注册一个账号点击打开链接

1.2 第二步初始化

首先,你需要创建一个新的项目目录。使用以下命令初始化 npm 项目:

bash 复制代码
npm init

初始化一个package.json文件

注意:必须要有这个文件才能上传,npm可以上传任何一个包含package.json的包,package.json的main(入口)设置为index.js(名字自取)然后在本目录下建一个index.js文件,name表示你这个包的名字只能小写,version代表版本,每次更新都要修改这里的版本再npm publish

package.json可以在这里了解一下点击打开链接

1.3 第三步登录

在本地使用命令行连接npm 使用下面的命令 然后按照提示走,密码默认是不会显示出来的

bash 复制代码
npm login 或者 npm adduser

1.4 更改镜像

因为大部分的人npm使用的是淘宝镜像,上传会失败,所以需要替换为原来的镜像

https://registry.npmjs.org/

bash 复制代码
npm config set registry https://registry.npmjs.org/

再查看是否设置成功

bash 复制代码
npm config get registry

更改了镜像需要按照前面说过的步骤,重新在本地登陆你的npm账户

1.5 上传

上传

bash 复制代码
npm publish

撤销上传(如果想删除已经上传了的包,可以在package.json所在目录使用以下命令)

bash 复制代码
npm unpublish --force

1.6 更新上传后的npm包

  1. 手动去package.json里面修改版本号,修改后的版本号必须比之前的大,然后使用npm publish上传
  2. 使用npm 命令行工具更新版本号,再使用npm publish 上传

注意事项:

你必须使用exports暴露你的方法,如下定义了一个npmTest的方法然后暴露出来,才能在安装这个包之后使用require引入

js 复制代码
exports.npmTest = (name) => {
    console.log(name)
}

另外平时我们在github上看到的readme.md的样式是用过MarkDow语法来实现的,这个语法实现起来很简单,MarkFown的yu语法在这里了解点击打开链接

二、编写代码

2.1 新建一个文件夹

首先,在本地新建一个文件夹,命名为"desensitization",并进入该文件夹。

bash 复制代码
mkdir desensitization
cd desensitization

2.2 初始化

使用npm初始化这个文件夹,并生成package.json文件。

bash 复制代码
npm init

2.3 package.json配置

在package.json文件中添加"name"、"version"、"description"、"main"等信息。

json 复制代码
{
  "name": "desensitization",
  "version": "1.0.0",
  "description": "A JavaScript module for masking names",
  "main": "index.js",
  "dependencies": {}
}

2.4 安装依赖模块

安装依赖模块"lodash"和"string-mask"。

bash 复制代码
npm install lodash string-mask --save

2.5 创建index.js文件

javascript 复制代码
const _ = require('lodash');
const StringMask = require('string-mask');

function maskName(name) {
  const firstName = _.capitalize(name.split(' ')[0]);
  const otherName = name.split(' ').slice(1).map(n => n[0].toUpperCase() + '.');
  const maskedName = [firstName, ...otherName].join(' ');
  
  return new StringMask('XXX XX').apply(maskedName);
}

module.exports = maskName;

2.6 测试

在根目录下创建一个名为"test.js"的文件,并添加以下代码

java 复制代码
const maskName = require('./index');

const name = 'John Smith';
const maskedName = maskName(name);

console.log(maskedName); // "XXX Xx"

2.7 上传

执行命令"npm publish",将模块上传至npm上。

bash 复制代码
npm publish

上传成功后,其他用户就可以使用npm install desensitization命令安装你编写的脱敏模块并使用了。

相关推荐
寅时码15 分钟前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听61318 分钟前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby26 分钟前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
不好听6131 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹1 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6131 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue1 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue1 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn2 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架
Csvn2 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端