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

发布一个npm组件库包

Webpack 配置 (webpack.config.js)

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');module.exports = {entry: './src/index.js', // 入口文件output: {path: path.resolve(__dirname, 'dist'),filename: 'my-library.js', // 输出文件library: 'MyLibrary', // 库名称libraryTarget: 'umd', // 支持多种模块化格式globalObject: 'this', // 解决 UMD 在浏览器和 Node.js 环境下的兼容性问题},externals: {react: 'react', // 不打包 React,使用外部的 React'react-dom': 'react-dom', // 不打包 ReactDOM},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/preset-react'],},},},{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},{test: /\.(png|jpg|gif|svg)$/,type: 'asset/resource',},{test: /\.(woff|woff2|eot|ttf|otf)$/,type: 'asset/resource',},],},plugins: [new MiniCssExtractPlugin({filename: 'my-library.css',}),],optimization: {minimize: true,minimizer: [new TerserPlugin(), // 压缩 JavaScriptnew CssMinimizerPlugin(), // 压缩 CSS],},resolve: {extensions: ['.js', '.jsx'], // 解析这些扩展名的文件},
};
  • 外部依赖:在 externals 中配置不打包的依赖(例如 React 和 ReactDOM),并在 peerDependencies 中声明它们,以确保用户在使用你的库时会安装这些依赖。

Package.json 配置

{"name": "my-library","version": "1.0.0","main": "dist/my-library.js", // CommonJS 入口"module": "dist/my-library.esm.js", // ESModule 入口"files": ["dist"],"scripts": {"build": "webpack --mode production"},"dependencies": {// 需要打包的依赖},"peerDependencies": {"react": "^17.0.0", // 作为 peer dependency"react-dom": "^17.0.0"},"devDependencies": {"@babel/core": "^7.0.0","@babel/preset-env": "^7.0.0","@babel/preset-react": "^7.0.0","babel-loader": "^8.0.0","css-loader": "^6.0.0","mini-css-extract-plugin": "^2.0.0","terser-webpack-plugin": "^5.0.0","css-minimizer-webpack-plugin": "^3.0.0","webpack": "^5.0.0","webpack-cli": "^4.0.0"}
}
  • main:

相关文章:

发布一个npm组件库包

Webpack 配置 (webpack.config.js) const path require(path); const MiniCssExtractPlugin require(mini-css-extract-plugin); const CssMinimizerPlugin require(css-minimizer-webpack-plugin); const TerserPlugin require(terser-webpack-plugin);module.exports {…...

处理PhotoShopCS5和CS6界面字体太小

处理PhotoShop CS6界面字体太小 背景:安装PhotoShop CS6后发现无法调大字体大小,特别是我的笔记本14寸的,显示的字体小到离谱。 百度好多什么降低该电脑分辨率,更改电脑的显示图标大小,或者PS里的首选项中的界面设置。…...

srs http-flv处理过程

目录 处理tcp请求,创建HttpConn 解析 http request创建consumer 读取consumer数据转封装为flv 处理tcp请求,创建HttpConn 调用堆栈如下: srs!SrsHttpConn::SrsHttpConn(ISrsHttpConnOwner*, ISrsProtocolReadWriter*, ISrsHttpServeMux*, std::__1::basic_string<ch…...

若Git子模块的远端地址发生了变化本地应该怎么调整

文章目录 前言git submodule 相关命令解决方案怎么保存子模块的版本呢总结 前言 这个问题复杂在既有Git又有子模块&#xff0c;本身Git的门槛就稍微高一点&#xff0c;再加上子模块的运用&#xff0c;一旦出现这种远端地址发生修改的情况会让人有些懵&#xff0c;不知道怎么处…...

docker运行code-servre并配置https通信

code-server 可以在浏览器中运行&#xff0c;使得开发者可以随时随地通过网络访问自己的开发环境&#xff0c;无需局限于某一台设备。只要有浏览器和网络连接&#xff0c;就可以继续编写代码和调试项目&#xff0c;非常适合远程办公和移动办公的需求。 由于每次启动code-serve…...

Linux 外设驱动 应用 4 触摸屏实验

触摸屏实验 1 触摸屏介绍1.1 基本应用介绍1.2 触摸屏工作原理介绍1.3 硬件介绍 2 应用代码编写2.1 找到输入设备2.2 打开驱动2.3 驱动查询应用2.4 应用结果 1 触摸屏介绍 1.1 基本应用介绍 LCD 显示屏包括显示屏和触摸屏&#xff0c;上层的是触摸屏&#xff0c;下层是显示屏。…...

Python-利用Pyinstaller,os库编写一个无限弹窗整蛊文件(上)

前言&#xff1a;本篇文章我们将学习一下如何利用你室友的这个习惯整蛊一下Ta,同时更重要的是借此提醒Ta要注意要做好个人信息的防泄露措施......&#xff08;声明&#xff1a;本次教学无任何不良引导&#xff09; 编程思路&#xff1a;本次编程中无限弹窗的实现我们需要调用Py…...

后台管理系统窗体程序:文章管理 > 文章列表

目录 文章列表的的功能介绍&#xff1a; 1、进入页面 2、页面内的各种功能设计 &#xff08;1&#xff09;文章表格 &#xff08;2&#xff09;删除按钮 &#xff08;3&#xff09;编辑按钮 &#xff08;4&#xff09;发表文章按钮 &#xff08;5&#xff09;所有分类下拉框 &a…...

图神经网络(GNN)入门笔记(2)——从谱域理解图卷积,ChebNet和GCN实现

一、谱域图卷积&#xff08;Spectral Domain Graph Convolution&#xff09; 与谱域图卷积&#xff08;Spectral Domain Graph Convolution&#xff09;对应的是空间域&#xff08;Spatial Domain&#xff09;图卷积。本节学习的谱域图卷积指的是通过频率来理解卷积的方法。 …...

接口类和抽象类在设计模式中的一些应用

C设计模式中&#xff0c;有些模式需要使用接口类&#xff08;Interface Class&#xff09;和抽象类&#xff08;Abstract Class&#xff09;来实现特定的设计目标。以下是一些常见的设计模式及其需要的原因&#xff0c;并附上相应的代码片段。 1. 策略模式&#xff08;Strateg…...

【系统架构】如何演变系统架构:从单体到微服务

引言 随着企业的发展&#xff0c;网站架构必须不断演变以应对日益增长的用户流量和复杂性需求。本文将详细探讨从单体架构到微服务架构的演变过程&#xff0c;尤其关注订单和支付服务的实现方式&#xff0c;帮助您打造一个高效、可扩展的在线平台。 步骤1&#xff1a;分离应用…...

Neo4j入门:详解Cypher查询语言中的MATCH语句

Neo4j入门&#xff1a;详解Cypher查询语言中的MATCH语句 引言什么是MATCH语句&#xff1f;示例数据1. 基础节点查询查询所有节点按标签查询节点 2. 关系查询基础关系查询指定关系方向指定关系类型 3. 使用WHERE子句4. 使用参数5. 多重MATCH和WITH子句实用技巧总结 引言 大家好…...

CPP贪心算法示例

设有n个正整数&#xff08;n ≤ 20&#xff09;&#xff0c;将它们联接成一排&#xff0c;组成一个最大的多位整数。 例如&#xff1a;n3时&#xff0c;3个整数13&#xff0c;312&#xff0c;343联接成的最大整数为&#xff1a;34331213 又如&#xff1a;n4时&#xff0c;4个整…...

GPT对NLP的冲击

让我来详细解释张俊林对GPT冲击NLP领域的分析&#xff1a; 中间任务(脚手架)的消失&#xff1a; 传统NLP中间任务&#xff1a; - 分词 - 词性标注 - 命名实体识别 - 句法分析 - 词向量学习为什么会消失&#xff1a; - GPT直接进行端到端学习 - 不需要人工定义的中间步骤 - 模…...

中值定理类证明题中对‘牛顿插值法’的应用

牛顿插值法是一种使用多项式插值的方法&#xff0c;它通过构造一个多项式来近似一组数据点。这种方法是由艾萨克牛顿提出的。牛顿插值法的一个优点是&#xff0c;当需要添加更多的数据点时&#xff0c;它不需要重新计算整个多项式&#xff0c;只需要对现有的多项式进行修改。...

HTMLCSS:3D 旋转卡片的炫酷动画

效果演示 这段代码是一个HTML和CSS的组合&#xff0c;用于创建一个具有3D效果的动画卡片。 HTML <div class"obj"><div class"objchild"><span class"inn6"><h3 class"text">我是谁&#xff1f;我在那<…...

Node.js 全栈开发进阶篇

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js- 全栈开发进阶篇 前言 大家好&#xff0c;我是青山。在上一篇文章中&#xff0c;…...

SQL语句-MySQL

数据定义声明 改变数据库语句 ALTER {DATABASE | SCHEMA} [db_name]alter_option ... ALTER {DATABASE | SCHEMA} db_nameUPGRADE DATA DIRECTORY NAMEalter_option: {[DEFAULT] CHARACTER SET [] charset_name| [DEFAULT] COLLATE [] collation_name } ALTER DATABASE使您能…...

Tencent Hunyuan3D

一、前言 腾讯于2024年11月5日正式开源了最新的MoE模型“混元Large”以及混元3D生成大模型“Hunyuan3D-1.0”&#xff0c;支持企业及开发者在精调、部署等不同场景下的使用需求。 GitHub - Tencent/Hunyuan3D-1 二、技术与原理 Hunyuan3D-1.0 是一款支持文本生成3D&#xff08;…...

[ABC239E] Subtree K-th Max

[ABC239E] Subtree K-th Max 题面翻译 给定一棵 n n n 个节点的树&#xff0c;每个节点的权值为 x i x_i xi​。 现有 Q Q Q 个询问&#xff0c;每个询问给定 v , k v,k v,k&#xff0c;求节点 v v v 的子树第 k k k 大的数。 0 ≤ x i ≤ 1 0 9 , 2 ≤ n ≤ 1 0 5 , …...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...