创建通用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、大数据、物联网、机器学习等设计与开发。 感兴趣的可…

二叉树遍历(C++)

题目描述 树和二叉树基本上都有先序、中序、后序、按层遍历等遍历顺序, 给定中序和其它一种 遍历的序列就可以确定一棵二叉树的结构。 假定一棵二叉树一个结点用一个字符描述,现在给出中序和按层遍历的字符串,求该树 的先序遍历字符串。 输…

【Python】TensorFlow介绍与实战

TensorFlow介绍与使用 1. 前言 在人工智能领域的快速发展中,深度学习框架的选择至关重要。TensorFlow 以其灵活性和强大的社区支持,成为了许多研究者和开发者的首选。本文将进一步扩展对 TensorFlow 的介绍,包括其优势、应用场景以及在最新…

基于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))函数,根据 与 的不…

C# 静态变量与动态变量的区别及用法

在 C# 中,"静态变量"与"动态变量"并不是直接相关的概念,但可以根据您的问题提供一些解释。静态变量和动态变量通常与变量的生命周期和类型绑定相关。以下是两者的一些区别: 静态变量(Static Variables&#…

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.输入多个特征,输出单个…

Python--MySQL及其使用

1. MySQL 简介 MySQL 是一个开源的关系型数据库管理系统(RDBMS),广泛用于各种应用程序,支持多种操作系统。它使用 SQL 语言进行数据查询、管理和操作。 2. MySQL 的主要特点 跨平台:支持多种操作系统,如…

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

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

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

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

姓名配对测试源码

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

日常学习--20240717

1、spring事务失效的几种情况? 自己new的对象(非spring定义的bean),或者同一个类的方法调用(this.调用,未使用动态代理),这两种方式都会绕过spring的aop对应的数据库不支持事务事务…

牛奶供应(三)

一个字贪&#xff0c;第一天&#xff0c;只能选择制作方式&#xff0c;后面的每一天&#xff0c;在<今天制作>与<前期存储>之间取更优解 例如样例&#xff1a;100 5&#xff0c;200 5&#xff0c;90 20&#xff0c;存储成本为10 第1天&#xff1a; 一定是制作&…

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. 补充&#xff1a;什么是 HTTP 消息3. 转换器3.1 转换器转换的是什么 4. Spring MVC中的 AJAX 请求5. ResponseBody 将服务器端的 return 返回值转化为“字符串(JSON格式…

大语言模型-基础及拓展应用

一、基础模型 1、Transformer 2、bert 3、gpt 二、大语言模型 三、句子向量 四、文档解析 1、通用解析 2、docx解析 3、 pdf解析 4、pptx解析 五、向量数据库

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

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

Android 14新特性:选择性照片和视频访问授权

Android 14 引入了选择性照片和视频访问授权的新特性&#xff0c;这是一项旨在增强用户隐私和数据安全的重要更新。在之前的 Android 版本中&#xff0c;应用程序请求访问设备上的照片和视频时&#xff0c;通常会要求完全访问权限&#xff0c;这意味着应用可以访问用户图库中的…

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

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