创建通用JS公共模块并发布至npm


title: 创建通用JS公共模块并发布至npm tags:

  • UMD
  • rollup
  • verdaccio
  • npm categories:
  • 模块化

概要内容

  • 创建:JS公共模块
  • 打包:使用rollup 打包公共模块
  • 发布:js公共模块至verdaccio平台
  • 发布:js公共模块至npm平台

如何创建JS公共模块

由于代码有点多就不贴代码了,直接去代码仓库看吧 传输门


rollup

  • 简介:

    Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。

  • 使用起因:

    公共相关的js文件想弄成单独的一个模块,方便后续开发使用,而不是不停的copy 和paste,所以就去了解怎么样把js公共相关js 打包成一个模块。

  • 安装
    pnpm install -g rollup
  • 创建配置文件
    // rollup.config.js
    import json from 'rollup-plugin-json';
    import babel from 'rollup-plugin-babel';
    import {uglify} from 'rollup-plugin-uglify';
    import {version} from '../package.json';
    import multiEntry from "rollup-plugin-multi-entry";
    import {terser} from "rollup-plugin-terser";

    export default {
        input: 'src/*.js',
        output: {
            /*输出公共库路径*/
            file: 'lib/index.js',
            /*配置:UMD 通用定义模块,支持前端端跨平台模块化*/
            format: 'umd',
            name: 'JSCommonUtils',
            /*压缩和混淆js*/
            plugins: [terser(), uglify()],
            /*JS前缀: 添加库相关信息*/
            banner: '/* JSCommonUtils version ' + version + ' */',
            /*JS尾部: 添加个人相关信息*/
            footer: '/* follow me on github aa4790139 */'
        },
        plugins: [
            json(),
            babel({
                /*过滤node_modules编译*/
                exclude: 'node_modules/**'
            }),
            /*允许多输入源*/
            multiEntry()
        ],
    };


verdaccio

  • 简介: 开源轻量的npm私服包管理平台
  • 使用起因:

    创建好自己的js公共模块时,我们需要在浏览器和Node.js 环境中测试,有了verdaccio 就非常方便我们测试了。而不是去不停npm本地公共模块搞得非常蛋疼,而且很容易出问题,所以为了简单和方便我们使用verdaccio 搞个私有仓库,方便我们模拟安装使用。

  • 安装
    pnpm install -g verdaccio
  • 启动
    verdaccio

发布至verdaccio平台

  • 常用命令
//1. 添加用户
npm adduser --registry http://localhost:4873
//2. 发布至私有仓库位置
npm publish --registry http://localhost:4873
// 撤回发布刚发布包
npm unpublish --force --registry http://localhost:4873 
// 撤回发布的指定包
npm unpublish package_name  --force --registry http://localhost:4873
  • 效果图 alt

发布至npm平台

  • 创建.npmignore 文件,过滤掉无需上传的文件和目录
node_modules/*
src/
build/
.babelrc
.gitignore
package-lock.json
pnpm-lock.yaml
!node_modules/crc32
!node_modules/deflate-js

提示: .npmignore文件内容,需要忽略的文件和目录写前面,需要排除忽略的文件或目录前加!写后面

  • 效果图 alt

参考文献:
  • verdaccio 官网
  • verdaccio 搭建配置
  • rollup.js 中文文档
  • rollup 官网打包实践
  • Rollup.js 实战学习笔记
  • .npmignore: ignore whole folder except given file types

以上: 如发现有问题,欢迎留言指出,我及时更正

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PostgreSQL】Windows 上安装 PostgreSQL 16版本

博主介绍:✌全网粉丝20W+,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。 感兴趣的可…

基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-支持VForm3表单的选择与支持

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。 1、初始化的时候加载表单 /** 查询表单列表 */ const getFormList () > {listForm().then(res > formOptions.value res.result.records) } 2、开始节点的修改,增加表…

计算机的错误计算(三十四)

摘要 用错数预测 (或 pow(a,x))函数的结果中含有的错误数字的个数,并与Visual Studio 和Excel 的输出中含有的错误位数相比较。结果显示,预测与实际一致。 对于 (或 pow(a,x))函数,根据 与 的不…

3.RabbitMQ安装-Centos7

官方网址:gInstalling RabbitMQ | RabbitMQ 安装前提,需要一个erlang语言环境。 下载 erlang: Releases rabbitmq/erlang-rpm GitHub rabbitmq-server: 3.8.8 Releases rabbitmq/rabbitmq-server GitHub 安装命令 (说明i表示安装&#xff…

SCI一区级 | Matlab实现SSA-CNN-GRU-Multihead-Attention多变量时间序列预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.【SCI一区级】Matlab实现SSA-CNN-GRU-Multihead-Attention麻雀算法优化卷积门控循环单元融合多头注意力机制多变量时间序列预测,要求Matlab2023版以上; 2.输入多个特征,输出单个…

一文掌握Prometheus实现页面登录认证并集成grafana

一、接入方式 以保护Web站点的访问控制,如HTTP 服务器配置中实现安全的加密通信和身份验证,保护 Web 应用程序和用户数据的安全性。 1.1 加密密码 通过httpd-tools工具包来进行Web站点加密 yum install -y httpd-tools方式一:通过htpasswd生…

智慧物流园区整体架构方案(46页PPT)

PPT介绍 将深入探讨如何通过高度集成的信息技术和物联网设备,打造一个自动化、高效与可持续发展的现代物流体系。该方案从智能感知层开始,利用传感器、RFID技术、GPS等手段实时采集物流数据;接着是网络传输层,借助高速且稳定的通信…

姓名配对测试源码

源码简介 姓名配对测试源码,输入两人姓名即可测试缘分,可查看朋友到底喜欢谁的趣味源码。 自己手动在数据库里修改数据,数据库里有就会优先查询数据库的信息, 没设置的话第一次查询缘分都是非常好的 95-99,第二次查…

C++ map和set的使用

目录 0.前言 1.关联式容器 2.键值对 3.树形结构的关联式容器 3.1树形结构的特点 3.2树形结构在关联式容器中的应用 4.set 4.1概念与性质 4.2使用 5.multiset 5.1概念与性质 5.2使用 6.map 6.1概念与性质 6.2使用 7.multimap 7.1概念与性质 7.2使用 8.小结 &a…

Spring MVC 中 HttpMessageConverter 转换器

1. Spring MVC 中 HttpMessageConverter 转换器 文章目录 1. Spring MVC 中 HttpMessageConverter 转换器2. 补充:什么是 HTTP 消息3. 转换器3.1 转换器转换的是什么 4. Spring MVC中的 AJAX 请求5. ResponseBody 将服务器端的 return 返回值转化为“字符串(JSON格式…

rtf是什么格式的文件?rtf格式和word的区别是什么?

RTF是什么格式的文件? RTF(富文本格式,Rich Text Format)和Word文档(以.doc和.docx为扩展名的Microsoft Word文档)是两种常用的文本文件格式。它们在文件结构、兼容性、功能和使用场景等方面存在一些显著差异。 比如…

arcgis怎么选取某个指定区域地方的数据,比如从全国乡镇数据选取长沙市乡镇数据

一共5个步骤,没一句废话,耐心看完。 1、如图,先将数据加载到arcgis里面,我们要选取里面长沙市的范围数据。 2、选取长沙市的语句 “市” like ‘长沙%’ 切记,切记,切记。所有符号要在 输入法英文状态…

微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示

在微信小程序开发过程中 遇到个坑 此处引用 swipeCell 组件 刚开始是组件不显示 然后又遇到样式不生效 首先排除问题 是否在.json文件中引入了组件 {"usingComponents": {"van-swipe-cell": "vant/weapp/swipe-cell/index","van-cell-gro…

电脑系统重装数据被格式化,那些文件还有办法恢复吗?

在日常使用电脑的过程中,系统重装或格式化操作是常见的维护手段,尤其是在遇到系统崩溃、病毒感染或需要升级系统时。然而,这一操作往往伴随着数据丢失的风险,尤其是当C盘(系统盘)和D盘(或其他数…

linux|多线程(一)

主要介绍了为什么要有线程 和线程的调用 和简单的对线程进行封装。 背景知识 a.重谈地址空间 我们知道物理内存的最小单元大小是4kB 物理内存是4G那么这样的单元友1M个 操作系统先描述再组织struct page[1M] 对于32位数据字长的机器,页表有2^32条也就是4G条&#…

LabVIEW Communications LTE Application Framework 读书笔记

目录 硬件要求一台设备2台USRPUSRP-2974 示例项目的组件文件夹结构DL Host.gcompeNodeB Host.gcompUE Host.gcompBuildsCommonUSRP RIOLTE 操作模式DLeNodeBUE 项目组件单机双机UDP readUDP writeMAC TXMAC RXDL TX PHYDL RX PHYUL TX PHYUL RX PHYSINR calculationRate adapta…

R语言优雅的把数据基线表(表一)导出到word

基线表(Baseline Table)是医学研究中常用的一种数据表格,用于在研究开始时呈现参与者的初始特征和状态。这些特征通常包括人口统计学数据、健康状况和疾病史、临床指标、实验室检测、生活方式、社会经济等。 本人在既往文章《scitb包1.6版本发…

无人机之机型区别与应用领域

一、多旋翼无人机 特点:多旋翼无人机依靠产生升力以平衡飞行器的重力,通过改变每个旋翼的转速来控制飞行姿态,能够悬停和垂直起降。他们具备体积小、重量轻、噪音小、隐蔽性好的特点,操作灵活且易于维护。 应用:多旋…

uni-app:文字竖直排列,并且在父级view中水平竖直对齐

一、效果 二、代码 <template><view class"parent"><text class"child">这是竖直排列的文字</text></view> </template> <script>export default {data() {return {}},methods: {},}; </script> <sty…

Ubuntu 24.04安装Jellyfin媒体服务器图解教程

使用 Jellyfin 等开源软件创建媒体服务器肯定能帮助您管理和跨各种设备传输媒体集合。当你有一个封闭社区时&#xff0c;这尤其有用。 什么是 Jellyfin 媒体服务器&#xff1f; Jellyfin 媒体服务器&#xff0c;顾名思义&#xff0c;是一款开源软件&#xff0c;允许用户使用本…