使用webpack给大屏自适应插件autofit.js增加umd打包方式

news2024/12/23 17:28:06

最近有个大屏自适应的需求,而且想直接通过script标签来引入自适应的插件js,搜索相中了autofit.js,可惜不支持umd格式的引入,虽然也能直接copy源码,但是还是折腾下给它打包成umd格式的代码。

fork源码,克隆到本地。

安装webpack,webpack-cli

npm install webapck webpack-cli -D

配置webpack.config.js

const path = require("path");

module.exports = [
  {
    mode: "production",
    entry: "./autofit.js",
    output: {
      filename: "autofit.umd.js",
      path: path.resolve(__dirname, "dist"),
      library: {
        type: "umd",
        name: "Autofit",// 配置库的名称,window.Autofit
      },
    },
  },
  {
    mode: "production",
    entry: "./autofit.js",
    experiments: {
      outputModule: true,// webpack输出esm模块需要配置该项,打包库最好还是用rollup其他的,webpack还是适合打包application
    },
    output: {
      filename: "autofit.esm.js",
      path: path.resolve(__dirname, "dist"),
      library: {
        type: "module",// 打包成esm模块
      },
    },
  },
];

npx webpack 执行打包命令

输出到dist目录。
在这里插入图片描述

发布npm包

npm login # 输入 username ,password,email进行登录
npm publish --access=public

npm地址

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

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

相关文章

第10章 项目管理基础知识

一、项目概述 (一)项目 在既定的项目资源要求和约束下,为实现特定目标而相互联系的一次性活动(资源任务)。世界上没有两个完全相同的项目项目有资源约束,一定的目的,是一次性。 (…

面试官:Docker和传统虚拟机有什么区别?

我有一个程序员朋友,他每年情人节都要送女朋友一台服务器。 他说:“谁不想在过节当天收到一台 4核8g 的服务器呢?” “万一对方不要,我还能留着自己用。” 给他一次过节的机会,他能把浪漫玩的明明白白。 所以今年情人…

APP上架APP Store因为苹果登录被拒,该如何解决

之前有一段时间 ,我们的APP因为苹果登录被拒了几次。分享出来,希望对大家有所帮助。 主要有两种被拒理由: 没有登录/苹果登录。登录按钮设计不符合标准。 这其实是很小的一件事情。但是就是这么小的事情,我们在这上面栽了几次跟…

【算法学习】day2

文章目录 BFS1.图像渲染2.岛屿数量 BFS 1.图像渲染 思路:BFS宽度遍历,我们需要对初始像素进行一层一层遍历,也就是上下左右四个方向进行遍历判断,如何访问这四个方向呢,就需要利用两个数组dx和dy来进行判断和遍历&…

uniapp关于iconfont字体图标使用

1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/),选择需要的图标添加到购物车 2、点开购物车,将图标添加到项目 3、点开项目,点击下载至本地,会得到一个download.zip包 4、解压download包 5、将包里的iconfont.css和iconf…

d16(149-153)-勇敢开始Java,咖啡拯救人生

跳过了p151 四小时的讲题我不敢听:) Stream Stream流,是JDK8后新增的API,可以用于操作集合或者数组的数据 优势:大量结合了Lambda的语法风格,该方式更强大更简单,代码简洁,可读性好 常用方法 …

2023最新!Git2.40.0于win10环境下的安装

2023最新!Git2.40.0于win10环境下的安装 git官网地址:https://git-scm.com/download/win/ 导航 文章目录 2023最新!Git2.40.0于win10环境下的安装导航一、下载Git二、安装Git三、检验 一、下载Git Git官网选择自己所需的版本下载 二、安装…

社区重要还是代码重要?

Apache Software Foundation,简称ASF,是世界范围内知名的软件基金会。旗下有很多世界知名的开源软件,比如Apache HTTP Server、Subversion、Hadoop等。ASF在社区治理上也有自己独特的理念,其中有一条中国开源软件圈子比较熟知&…

M2 Mac mini跑Llama3

前言 在4-19左右,Meta 宣布正式推出下一代开源大语言模型 Llama 3;共包括 80 亿和 700 亿参数两种版本,号称 “是 Llama 2 的重大飞跃”,并为这些规模的 LLM 确立了新的标准。实际上笔者早就体验过,只不过自己电脑没什…

分享三款可以给pdf做批注的软件

PDF文件不像Word一样可以直接编辑更改,想要在PDF文件上进行编辑批注需要用到一些专业的软件,我自己常用的有三款,全都是官方专业正版的软件,功能丰富强大,使用起来非常方便! 1.edge浏览器 这个浏览器不仅可…

使用 Tess4J 实现本地与远程图片的文字识别

pom: <dependency><groupId>net.sourceforge.tess4j</groupId><artifactId>tess4j</artifactId><version>5.11.0</version></dependency> 部分代码: package com.zy.datapickcli.sys.controller;import net.sourceforge.tes…

等保测评有那些流程?为什么要做等保

根据《网络安全法》规定&#xff0c;网络运营者应当按照国家的网络安全技术标准和要求&#xff0c;采取技术措施保障网络安全&#xff0c;避免网络安全事件的发生。而等保测评是国家对企事业单位进行信息系统安全等级评定的一项重要制度&#xff0c;通过等级测评&#xff0c;可…

Java 面向对象—重载和重写/覆盖(面试)

重载和重写/覆盖&#xff1a; 重载&#xff08;overload&#xff09;&#xff1a; Java重载是发生在本类中的&#xff0c;允许同一个类中&#xff0c;有多个同名方法存在&#xff0c;方法名可以相同&#xff0c;方法参数的个数和类型不同&#xff0c;即要求形参列表不一致。重载…

场景文本检测识别学习 day07(BERT论文精读)

BERT 在CV领域&#xff0c;可以通过训练一个大的CNN模型作为预训练模型&#xff0c;来帮助其他任务提高各自模型的性能&#xff0c;但是在NLP领域&#xff0c;没有这样的模型&#xff0c;而BERT的提出&#xff0c;解决了这个问题BERT和GPT、ELMO的区别&#xff1a; BERT是用来…

笑铺日记:为啥她家的顾客都爱办会员?

现在这个年代&#xff0c;做啥生意都要有自己的会员体系&#xff0c;不然生意很难做长久&#xff0c;哪来的那么多新客&#xff1f; 很多老板们想做会员营销&#xff0c;不过都停在了第一步——会员卡发不出去。推荐办卡&#xff0c;顾客一看到实体卡就反感&#xff0c;就连免…

网络安全之文件上传漏洞(上篇)(技术进阶)

目录 一&#xff0c;什么是文件上传漏洞&#xff1f;文件上传漏洞会造成什么危害&#xff1f; 二&#xff0c;文件上传靶场upload-labs闯关 Pass-01 Pass-02 Pass-03 Pass-04 Pass-05 Pass-06 Pass-07 ​Pass-08 Pass-09 Pass-10 总结 一&#xff0c;什么是文件上传漏洞&…

学习Java,下载Java和工具

下载Java地址Java17 https://www.oracle.com/cn/ 下载notepad 的博客 https://blog.csdn.net/xnxqwzy/article/details/132243264 环境变量配置

【服务器部署篇】Linux下快速安装Jenkins

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0c;产…

2024LarkXR新增功能系列之五 | 单端口支持多并发

实时云渲染技术在为虚拟现实、游戏、和各种应用程序提供强大的渲染支持的同时&#xff0c;也带来了一些网络和运维上的挑战。在传统的设置中&#xff0c;实时云渲染推流技术需要为每个视频流单独占用服务器的一个端口。这种方法在多用户同时访问的情况下可能会导致端口资源的快…

为什么选择誉天云服务HCIE课程

誉天云服务HCIE课程亮点&#xff1a; 深度融合云原生 包含原生K8s和docker内容&#xff0c;引入isito和ASM功能进行微服务治理&#xff0c;结合Linux功底设计云上性能优化&#xff0c;和架构设计。师资力量强大 课程由两名5HCIE认证讲师授课&#xff0c;认证辅导由已通过HCIE-C…