Rollup:打包 TypeScript - React 组件库

调用浏览器摄像头拍照组件

  • 1、前提
  • 1、安装依赖
  • 2、添加 rollup.config.js 配置
  • 3、修改 package.json
    • 3.1 添加打包命令
    • 3.2 添加组件入口
    • 3.3 添加组件声明入口
    • 3.4 浏览器支持

1、前提

1.1 通过 create-react-app take-photo --template 创建前端应用
1.2 添加组件 TakePhoto (拍照组件)
1.3 App 为测试组件
1.4 目录结构
在这里插入图片描述

1、安装依赖

@rollup/plugin-commonjs 
@rollup/plugin-image
@rollup/plugin-node-resolve
@rollup/plugin-terser
@rollup/plugin-typescript
autoprefixer
postcss
postcss-preset-env
postcss-url
rollup
rollup-plugin-delete
rollup-plugin-postcss

2、添加 rollup.config.js 配置

const { nodeResolve } = require('@rollup/plugin-node-resolve');
// 允许使用 node 或 umd 包
const commonjs = require( '@rollup/plugin-commonjs');
// 打包前清空输出目录
const del = require( 'rollup-plugin-delete');
// 压缩代码
const terser = require('@rollup/plugin-terser');
// 编译 TS 代码
const typescript = require( '@rollup/plugin-typescript');
// 处理scss
const postcss = require( 'rollup-plugin-postcss');
// 处理scss 添加前缀
const autoprefixer = require( 'autoprefixer');
// 处理 css 中引入的图片
const postCssUrl = require("postcss-url");
// 处理组件引入的图片
const image = require('@rollup/plugin-image');module.exports = {input: 'src/TakePhoto/index.tsx',output: [{file: 'dist/TakePhoto/index.js',format: 'umd',name: 'TakePhoto',globals: {react: 'React','react-dom': 'ReactDom'}}],external: ['react', 'react-dom'],plugins: [del({ targets: 'dist/*', verbose: true }),nodeResolve(),commonjs(),terser(),typescript({"include": ["src/TakePhoto/*","src/types.d.ts"]}),postcss({extensions: ['.css', '.scss'],inject: true,minimize: true,plugins: [postCssUrl({url: 'inline'}),autoprefixer()],}),image()]
};

3、修改 package.json

3.1 添加打包命令

"scripts": {// 其他命令..."build": "rollup --config"
},

3.2 添加组件入口

"main": "dist/TakePhoto/index.js",

3.3 添加组件声明入口

"types": "dist/TakePhoto/index.d.ts",

3.4 浏览器支持

"browserslist": [">0.2%","not dead","not op_mini all","Firefox >= 52","IE >= 10"
],

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

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

相关文章

差异性分析汇总

在做科研写论文的时候,我们总会听说要对数据进行差异性分析,那么何为差异性分析?差异性分析常用的方法有哪些?这些方法应该如何进行分类?如何选择?差异性分析的数据格式是怎么样的?软件如何操作…

如何在Win系统安装Jupyter Notbook并实现无公网ip远程访问本地笔记

文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配置2.3 Cpolar下载安装 3.Cpolar端口设置3.1 Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 在数据分析工作中,使用最多的无疑就是各种函数、图表、…

C语言-指针的基本知识(上)

一、关于内存 存储器:存储数据器件 外存 外存又叫外部存储器,长期存放数据,掉电不丢失数据 常见的外存设备:硬盘、flash、rom、u盘、光盘、磁带 内存 内存又叫内部存储器,暂时存放数据,掉电数据…

Android 水印效果

Android 水印效果 本文主要介绍下android 中水印的实现效果. 实现的方式有多种,就不一一赘述了, 本文就是通过自定义drawable来实现水印. 不多说,直接上代码吧: import android.content.Context; import android.content.res.Resources; import android.graphics.Canvas; i…

freeRTOS

1.新建一个无FreeRTOS的工程,取名为Motor 根据风扇模块PDF原理图和操作文档让风扇转动 1.新建一个包含FreeRTOS的工程,取名为Semaphore 2.根据信号量的文档先预习信号量的创建步骤和API函数 3.完成使用信号量访问共享资源的实验 具体步骤: 创…

Unity制作右键菜单(自适应分辨率)

一、需求 右键触发打开菜单,左键在内部可选择选项,左键单击菜单范围外关闭。难点在于屏幕坐标系,鼠标位置,UI位置之间的关系。 二、理论 前置知识: unity中,用RectTransform对象的position.x和position.y表…

vscode连不上虚拟机,一直密码错误

最近在做毕设,但是vscode使用连接不上虚拟机,我以为是网络配置的问题,一顿查阅没找到原因。 后来查了一下ssh的日志,发现ssh有消息,但是也提示密码错误。 没找到密码配置格式什么的,经查看sshd配置文件发现…

C语言第十二弹--扫雷

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 扫雷 1、扫雷游戏分析和设计 1.1、扫雷游戏的功能说明 1.2 游戏的分析和设计 1.2.1、数据结构的分析 1.2.2、文件结构设计 2、扫雷游戏的结构分析 2.1、用…

自动化软件开发常用代码分享!

随着科技的发展,自动化软件开发已经成为现代企业不可或缺的一部分,自动化软件可以帮助企业提高生产效率、降低成本、优化业务流程。 而在自动化软件开发中,代码是实现这些功能的基础,本文将分享一些常用的自动化软件开发代码&…

【JSON2WEB】03 go的模板包html/template的使用

Go text/template 是 Go 语言标准库中的一个模板引擎,用于生成文本输出。它使用类似于 HTML 的模板语言,可以将数据和模板结合起来,生成最终的文本输出。 Go html/template包实现了数据驱动的模板,用于生成可防止代码注入的安全的…

计算机网络·网络层

网络层 网络层提供的两种服务 争论: 网络层应该向运输层提供怎样的服务?面向连接还是无连接? 在计算机通信中,可靠交付应当由谁来负责?是网络还是端系统? 2 种观点: 面向连接的可靠交付。 无连…

macOS与Linux相互投屏的方法

很多人面对跨系统投屏都望而却步。其实只要找对方法,两台不同系统的电脑也可以相互投屏。 今天就来看看Linux系统和macOS系统如何相互投屏! 第一步,将Linux系统电脑和macOS系统电脑连接同一网络。假设是macOS系统投屏到Linux系统,…

【数据分享】1929-2023年全球站点的逐年平均气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据,气象指标包括气温、风速、降水、湿度等指标,其中又以气温指标最为常用!说到气温数据,最详细的气温数据是具体到气象监测站点的气温数据!本次我们为大家带来的就是具体到气象监…

二手交易|校园二手交易小程序|基于微信小程序的闲置物品交易平台设计与实现(源码+数据库+文档)

校园二手交易小程序目录 目录 基于微信小程序的闲置物品交易平台设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、商品信息管理 3、公告信息管理 4、论坛信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕…

C++类和对象引入以及类的介绍使用

文章目录 一、面向过程和面向对象的初步认识二、类的引入2.2 类的引入 三、类的访问限定符及封装3.3 访问限定符3.4 【面试题】C中struct和class的区别3.5 类的两种定义方式 四、封装【面试题】面向对象的三大特性 五、类的作用域六、类的实例化七、类对象模型7.1 类对象的存储…

《动手学深度学习(PyTorch版)》笔记4.1

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过。…

Python列表中的append功能及用法举例

Python列表中的append功能及用法举例 🌵文章目录🌵 🌳引言🌳🌳append()🌳🍀功能介绍🍀🍀语法🍀🍀示例🍀🍀注意事项&#x…

如何使用宝塔面板搭建MySQL 5.5数据库并实现公网远程连接

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

SpringCloud-高级篇(十八)

前面我们已经实现了多级缓存架构,大大提高了查询商品的性能,缓存在提高性能的同时,也带来了一致性的问题,比如说数据库发生了修改,这个时候,如果缓存依然是旧的数据,两者就产生了不一致&#xf…

Cesium介绍及3DTiles数据加载时添加光照效果对比

一、Cesium简介 Cesium原意是化学元素铯,铯是制造原子钟的关键元素,通过命名强调了Cesium产品专注于基于时空数据的实时可视化应用。熟悉GIS开发领域的读者都知道,Cesium是一个用于创建3D地理空间应用程序的开源JavaScript库,它允…