当前位置: 首页 > news >正文

如何在npm上发布自己的包

如何在npm上发布自己的包

npm创建自己的包

一、一个简单的创建

1、创建npm账号
  • 官网:https://www.npmjs.com/
  • 创建账号入口:https://www.npmjs.com/signup

注意:需要进入邮箱验证

2、创建目录及初始化
$ mkdir ufrontend-test
$ cd ufrontend-test
ufrontend-test> npm init
3、文件内容及目录结构

注意:在生成package.json中,name的名称和项目的名称保持一至

  • package.json
{"name": "ufrontend-test","version": "1.0.0","description": "","main": "index.js","scripts": {"ufrontend-test": "echo \"Error: no test specified\" && exit 1"},"author": "ufrontend","license": "ISC"
}
  • 入口文件编写,index.js,加一句简单的打印
console.info('hello world');
  • 最终目录结构
├── ufrontend-test
│   ├── index.js
└── └── package.json
4、发布
  • 项目根目录下,运行npm addUser命令,添加自己的用户信息
ufrontend-test> npm addUser

如果已经注册过账号,直接登录就行了

ufrontend-test> npm login

输入用户名、密码、邮箱

  • 发布
ufrontend-test> npm publish

发布完成后,在自己的package里,会看到对应的包

5、下载调用
  • 下载
ufrontend-test> npm install ufrontend-test -D

package.json

"devDependencies": {"ufrontend-test": "^1.0.0"
}
  • 使用

index.js

require('ufrontend-test');
  • 控制台执行
ufrontend-test> node index.js

输出:hello world

6、删除发布的包
ufrontend-test> npm --force unpublish ufrontend-test

注意:超过24小时就不能删除了

7、废弃包(这个包并不会删除,只是在别人下载使用的时候会提示)
ufrontend-test> npm deprecate --force ufrontend-test@1.0.0 "这个包不在维护了。"
8、更新包
  • 先把package.json里的version版本号修改了,再执行publish命令就行了
ufrontend-test> npm publish
  • 更新(重新下载)
ufrontend-test> npm install ufrontend-test -D

二、require/import导入及使用说明

1、目录结构
├── ufrontend-test2
│   ├── index.js
│   ├── package.json
└── └── readme.md
2、index.js(兼容AMD和CMD的写法)
;(function(global) {"use strict";var MyPlugin = function(opts) {console.log(opts);};MyPlugin.prototype = {init: function() {console.log('init');}};if (typeof module !== 'undefined' && module.exports) {module.exports = MyPlugin;} else if (typeof define === 'function') {define(function() { return MyPlugin; });}global.MyPlugin = MyPlugin;})(this);
3、readme.md(插件说明)

4、下载使用
  • 下载
ufrontend-test> npm install ufrontend-test2 -D
  • 在index.js中引入使用
var MyPlugin = require('ufrontend-test2');MyPlugin({name: 'MyPlugin',version: '1.0.1'
});MyPlugin.prototype.init();

运行命令

ufrontend-test> node index.js

结果:

{ name: 'MyPlugin', version: '1.0.1' }
init
  • 在vue项目main.js中,引入使用
ufrontend-test> npm install ufrontend-test4 -D
  • import方式
import MyPlugin from 'ufrontend-test4'
console.log(MyPlugin('hello my plugin.'))
  • require方式
let MyPlugin = require('ufrontend-test4');
console.log(MyPlugin('hello plugin.'))
5、加git仓库链接
  • 添加repository
"repository": {"type": "git","url": "https://github.com/xxx/ufrontend_test2.git"
},
  • 发布后,就可以在包中查看git仓库了

6、使用webpack打包

需要使用webpack对组件或者模块进行打包,因为可复用库的模块化,需要适合在任何场景中进行引用,比如AMD/CMD、CommonJs、ES6、ES5等环境。从webpack打包之后的头文件来看:

(function webpackUniversalModuleDefinition(root, factory) {if (typeof exports === 'object' && typeof module === 'object')module.exports = factory(); // nodeelse if (typeof define === 'function' && define.amd)define([], factory);    //  AMD/CMDelse if (typeof exports === 'object')exports["Url"] = factory(); elseroot["Url"] = factory();
})(this, function () {// somecode
}

从代码可以看出,webpack打包出来的文件是支持多场景的引用方式的。

下面我们只需要在webpack.config.js里添加libraryTarget配置,设为umd模式

output: {libraryTarget: "umd"
}

目录结构:

├── ufrontend-test4
│   ├── build
│   ├── ├── main.min.js
│   ├── index.js
│   ├── package.json
└── └── webpack.config.js
  • package.json
{"name": "ufrontend-test4","version": "1.0.4","description": "","main": "./build/main.min.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "ufrontend22","license": "ISC","devDependencies": {"webpack": "^3.1.0"}
}

main是最终引入的文件

  • 初始化安装
ufrontend-test> npm install
  • webpack.config.js指定umd模式
const webpack = require('webpack')
const path = require('path')module.exports = {entry: ['./index.js'],output: {path: path.resolve(__dirname, './build'),filename: '[name].min.js',libraryTarget: 'umd'}
}
  • index.js
module.exports = {foo() {console.log('foo');},bar() {console.log('bar')}
}

使用webpack打包

ufrontend-test> webpack
  • 重新发布
ufrontend-test> npm login
ufrontend-test> npm publish
  • 在vue项目中安装使用
ufrontend-test> npm install ufrontend-test4 -D

main.js

import {foo} from 'ufrontend-test4'
foo(); // foo

相关文章:

如何在npm上发布自己的包

如何在npm上发布自己的包 npm创建自己的包 一、一个简单的创建 1、创建npm账号 官网:https://www.npmjs.com/创建账号入口:https://www.npmjs.com/signup 注意:需要进入邮箱验证 2、创建目录及初始化 $ mkdir ufrontend-test $ cd ufron…...

SQL Chat:从SQL到SPEAKL的数据库操作新纪元

引言 SQL Chat是一款创新的、对话式的SQL客户端工具。 它采用自然语言处理技术,让你能够像与人交流一样,通过日常对话的形式对数据库执行查询、修改、创建及删除操作 极大地简化了数据库管理流程,提升了数据交互的直观性和效率。 在这个框…...

jmeter性能优化之mysql配置

一、连接数据库和grafana 准备:连接好数据库和启动grafana并导入mysql模板 大批量注册、登录、下单等,还有过节像618,双11和数据库交互非常庞大,都会存在数据库的某一张表里面,当用户在登录或者查询某一个界面时&…...

VueRouter3学习笔记

文章目录 1,入门案例2,一些细节高亮效果非当前路由会被销毁 3,嵌套路由4, 传递查询参数5,命名路由6,传递路径参数7,路径参数转props8,查询参数转props9,replace模式10&am…...

「前端+鸿蒙」鸿蒙应用开发-TS函数

在 TypeScript 中,函数是一等公民,这意味着函数可以作为参数传递、作为其他函数的返回值,甚至可以赋值给变量。TypeScript 为 JavaScript 的函数增加了类型系统,使得函数的参数和返回值都具有明确的类型。 TS快速入门-函数 基本函…...

python后端结合uniapp与uview组件tabs,实现自定义导航按钮与小标签颜色控制

实现效果(红框内): 后端api如下: task_api.route(/user/task/states_list, methods[POST, GET]) visitor_token_required def task_states(user):name_list [待接单, 设计中, 交付中, 已完成, 全部]data []color [#F04864, …...

mingw如何制作动态库附python调用

1.mingw和msvc g -fpic HelloWorld.cpp -shared -o test.dllg -L . -ltest .\test.cpp 注意-L后面的.挨不挨着都行,-l不需要-ltest.dll,只需要-ltest 2.dll.cpp extern "C" {__declspec(dllexport) int __stdcall add(int a, int b) {return…...

Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios

什么是Vue? Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/ Vue快速入门 打开页面&#xff0…...

Python基础教程(八):迭代器与生成器编程

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…...

Oracle10.2.0.1冷备迁移之_数据文件拷贝方式

由于阿里云机房要下架旧服务器,单位未购买整机迁移服务,且业务较老不兼容Oracle11g,所以新购买一台新服务器进行安装Oracle10.2.0.1 ,后续再将数据迁移到新服务器上。 id 数据库版本 操作系统版本 实例名 源库 115.28.242.25…...

智能合约中外部调用漏洞

外部调用 : 在智能合约开发中,调用不受信任的外部合约是一个常见的安全风险点。这是因为,当你调用另一个合约的函数时,你实际上是在执行那个合约的代码,而这可能会引入你未曾预料的行为,包括恶意行为。下面…...

转型AI产品经理(4):“认知负荷”如何应用在Chatbot产品

认知负荷理论主要探讨在学习过程中,人脑处理信息的有限容量以及如何优化信息的呈现方式以促进学习。认知负荷定律认为,学习者的工作记忆容量是有限的,而不同类型的认知任务会对工作记忆产生不同程度的负荷,从而影响学习效果。以下…...

【C++11】常见的c++11新特性(一)

文章目录 1. C11 简介2. 常见的c11特性3.统一的列表初始化3.1initializer_list 4. decltype与auto4.1decltype与auto的区别 5.nullptr6.右值引用和移动语义6.1左值和右值6.1.1左值的特点6.1.2右值的特点6.1.3右值的进一步分类 6.2左值引用和右值引用以及区别6.2.1左值引用6.2.2…...

牛客周赛 Round 46 题解 C++

目录 A 乐奈吃冰 B 素世喝茶 C 爱音开灯 D 小灯做题 E 立希喂猫 F 祥子拆团 A 乐奈吃冰 #include <iostream> #include <cstring> #include <algorithm> #include <cmath> #include <queue> #include <set> #include <vector>…...

9.3 Go 接口的多态性

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

Java通过字符串字段匹配形成树形结构

Java通过字符串字段匹配形成树形结构 文章目录 Java通过字符串字段匹配形成树形结构数据表模拟数据解决办法:1、domian 类:2、Node层(形成树形关系):3、controller 层4、Util 工具类1、BeanCopierUtil4、Mapper5、Manager(用来组装树形结构)6、测试:有的时候我们形成树形不…...

数字孪生智慧水利:精准管理与智能决策的新时代

图扑数字孪生技术在智慧水利中的应用&#xff0c;通过虚拟模型与真实水利系统的无缝连接&#xff0c;实现对水资源和水利工程的全面监控和精细管理。实时数据采集与动态模拟提升了水利系统的预测和响应能力&#xff0c;从洪水预警到水质监测&#xff0c;数字孪生助力各项决策更…...

基于ChatGLM3的本地问答机器人部署流程

基于ChatGLM3的本地问答机器人部署流程 前言一、确定文件结构1.新建文件夹储存本地模型2.下载源码和模型 二、Anaconda环境搭建1.创建anaconda环境2.安装相关库3.设置本地模型路径4.启动 三、构建本地知识库1.下载并安装postgresql2.安装c库3.配置向量插件 四、线上运行五、 全…...

归并排序——逆序数对的统计

逆序数对的统计 题目描述 运行代码 #include <iostream> using namespace std; #define LL long long const int N 1e5 5; int a[N], tmp[N]; LL merge_sort(int q[], int l, int r) {if (l > r)return 0; int mid l r >> 1; LL res merge_sort(q, l,…...

基于截图和模拟点击的自动化压测工具开发(MFC)

1.背景 想对一个MFC程序做自动压测功能&#xff0c;根据判断程序界面某块区域是否达到预定状态&#xff0c;来自动执行鼠标点击或者键盘输入的操作&#xff0c;以解决测试人员需要重复手动压测问题。 1.涉及的技术 串口控制&#xff0c;基于MFC橡皮筋类(CRectTracker)做一个…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...