esbuild打包

esbuild官网

npm install esbuild

此命令应该会将 esbuild 安装到你本地的 node_modules 中。 你可以运行如下命令,来检测 esbuild 的原生可执行文件 是否正常:

.\node_modules\.bin\esbuild --version

这是一个简易的真实案例,用于说明 esbuild 的能力以及如何使用它。 首先,请安装 react 和 react-dom 的 package:

npm install react react-dom
import * as React from 'react'
import * as Server from 'react-dom/server'let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

最后,运行 esbuild 打包此文件:

.\node_modules\.bin\esbuild app.jsx --bundle --outfile=out.js

不出意外的话,上述命令执行后会创建一个名为 out.js 的文件, 其中包含你的代码以及 React 库的代码。 代码完全独立,无需再依赖你的 node_modules。 如果你使用 node out.js 运行代码,你应该能看到如下内容:

<h1 data-reactroot="">Hello, world!</h1>

注意,esbuild 除了 jsx 扩展名, 无需任何配置就能够将 JSX 语法转换为 JavaScript。 尽管 esbuild 可以进行配置, 但它试图提供合理的默认值,以便在常见的情况下自动完成构建。 如果你想在 .js 文件中使用 JSX 语法,你可以通过设置 --loader:.js=jsx 选项, 来告诉 esbuild 对 js 文件进行 JSX 的编译。 更多关于可用配置项的说明,请参阅 API 文档。

在 package.json 中添加构建脚本, 具体代码如下:

{"scripts": {"build": "esbuild app.jsx --bundle --outfile=out.js"}
}
require('esbuild').build({entryPoints: ['app.jsx'],bundle: true,outfile: 'out.js',
}).catch(() => process.exit(1))

build 函数会在子进程中运行 esbuild 的可执行文件,并返回一个 Promise, 当构建完成后,该 Promise 将被 resolve。 上述代码并未打印捕获的异常, 因为异常中的任何错误信息默认会被打印到控制台(你 可以通过修改 日志级别 来按需关闭此功能)。

尽管有个同步的 buildSync API, 但异步 API 对于构建脚本来说更为合适, 因为插件只与异步 API 协同工作。 你可以在 API 文档 中了解更多关于构建 API 的配置项。

构建工具默认为浏览器输出代码, 所以无需额外配置就可以完成构建。 对于开发版本,你可能需要使用 --sourcemap 以启用 source map, 对于生产版本,你可能需要使用 --minify 启用压缩。 有时,你可能还需要为你支持的浏览器配置目标环境。 所以具体命令会像如下所示:

require('esbuild').buildSync({entryPoints: ['app.jsx'],bundle: true,minify: true,sourcemap: true,target: ['chrome58', 'firefox57', 'safari11', 'edge16'],outfile: 'out.js',
})

有时,你使用的包可能会引入另一个只能在 node 上运行的包, 例如 node 内置的 path 包。 当发生这种情况时,你可以通过在 package.json 中使用 browser 字段 来将此包替换成对浏览器友好的包,具体如下:

{"browser": {"path": "path-browserify"}
}

有些你想使用的 npm 包可能并不是为在浏览器中运行设计的。 有时你可以使用 esbuild 的配置项来解决这些问题, 并成功打包。 未定义的全局变量在简单情况下可以用 define 功能代替, 如遇到更复杂的情况,可以用 inject 功能代替。

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

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

相关文章

为什么大家考完软考中级都去考高级?原因在这里!

2023上半年软考考试已经结束了&#xff0c;有很多同学在后台留言&#xff0c;一起考软考中级的同学都开始备考高级了&#xff0c;为什么考完软考中级还要考高级呢&#xff1f;软考高级含金量大吗&#xff1f;考试难度高吗&#xff1f;软考中级我考的集成&#xff0c;高级应该选…

STM32获取最大堆栈空间

参考 stackflow相关讨论 原理 通过参考链接&#xff0c;可知探测Stack的最大深度是先在stack中填充不常用的特定值&#xff0c;然后实时检测这些值哪些发生了变化&#xff0c;变化的表示使用到了这个空间&#xff0c;如果程序完全遍历后&#xff0c;有些值还是没变&#xff…

c语言-输入输出详解

文章目录 格式化输入输出占位符printfscanf 字符串输入输出puts&#xff08;&#xff09;gets&#xff08;&#xff09; 字符输入输出putchar&#xff08;&#xff09;getchar&#xff08;&#xff09; 区别 格式化输入输出 输入输出的库函数的头文件&#xff1a; #include<…

物联网AI MicroPython学习之语法 SPI串行外设通信

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; SPI 介绍 模块功能: SPI串行外设驱动 接口说明 SPI - 构建SPI对象 函数原型&#xff1a;SPI(id, baudrate&#xff0c;polarity, phase&#xff0c;sck, mosi, miso)参数说明&#xff1a; 参数类型必选参…

内置函数和消息传递API

消息传递范式 消息函数、聚合函数与更新函数 消息函数接受一个参数 edges&#xff0c;这是一个 EdgeBatch 的实例&#xff0c; 在消息传递时&#xff0c;它被DGL在内部生成以表示一批边。edges 有 src、 dst 和 data 共3个成员属性&#xff0c; 分别用于访问源节点、目标节点…

使用Docker/K8S/Helm部署项目流程

假设项目已经开发完成&#xff0c;部署流程如下&#xff1a; 一、制作镜像&#xff1a; 1、创建nginx配置文件default.conf server {listen 80;server_name localhost; # 修改为docker服务宿主机的iplocation / {root /usr/share/nginx/html;index index.html ind…

postgresql安装fdw扩展

最近有同一个服务器不同数据库、不同服务器数据库之间的数据同步需求&#xff0c;使用了fdw 下面举例的是同一个服务器两个不同数据库的同步情况 1、安装扩展 create extension postgres_fdw; 在需要使用fdw的数据库都加上该扩展 2、创建fdw服务器 mlhbase_prd库 CREATE…

【17】基础知识:reduxjs/toolkit

一、Redux Toolkit 概念了解 Redux Toolkit 是 Redux 官方强烈推荐&#xff0c;开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。 Redux Toolkit 最初是为了帮助解决有关 Redux 的三个常见问题而创建的&#xff1a; "配置 Redux store 过…

Failed to execute org.scala-tools:maven-scala-plugin:2.15.2解决

原因也不是很清楚&#xff0c;查看一个博主文章(net.alchim31.maven:scala-maven-plugin&#xff1a;maven依赖无法下载或无法编译)得到的解决方案&#xff1a; 在idea的terminal执行以下语句即可实现maven对scala代码的编译&#xff1a; mvn clean scala:compile compile pac…

从硬件到软件:揭秘磁盘结构和文件系统组织

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容讲解了从磁盘的硬件结构&#xff0c;再到操作系统内部是…

Redis维护缓存的方案选择

Redis中间件常常被用作缓存&#xff0c;而当使用了缓存的时候&#xff0c;缓存中数据的维护&#xff0c;往往是需要重点关注的&#xff0c;尤其是重点考虑的是数据一致性问题。以下是维护数据库缓存的一些常用方案。 1、先删除缓存&#xff0c;再更新数据库 导致数据不一致的…

OpenAI内斗剧情反转!微软力保ChatGPT之父回归?

美东时间11月17日下午&#xff0c;全球最热门的聊天机器人ChatGPT开发商OpenAI宣布了一项重磅管理层调整&#xff0c;Sam Altman将辞去CEO一职&#xff0c;并离开公司董事会。 Altman被踢出的消息除了让业界担心会影响该公司未来发展外&#xff0c;OpenAI另一位共同创办人暨总裁…

京东小程序:无代码开发实现API集成,连接电商平台、CRM和客服系统

无需复杂API开发&#xff0c;京东小程序连接电商平台 京东小程序平台以其全开放的生态模式&#xff0c;让商家享有京东系APP流量福利、海量SKU和开放能力&#xff0c;提升用户体验&#xff0c;同时也带来了新商机。京东小程序的最大优势在于&#xff0c;商家无需进行复杂的API…

系统设计之通讯协议

一、通讯协议 架构风格定义了应用程序编程接口 (API) 的不同组件如何相互交互。因此&#xff0c;它们通过提供设计和构建 API 的标准方法来确保效率、可靠性以及与其他系统集成的便捷性。以下是最常用的样式&#xff1a; 1. SOAP 成熟、全面、基于XML 最适合于企业应用 可扩展…

见面礼——图论

给定一个 n 个点 n 条边的无向图&#xff0c;你需要求有多少种选择图上的一个点 p 和一条边 (x,y) 的方案&#xff0c;使得删去 (x,y) 后图变成一棵树&#xff0c;且这棵树以 p 为根时每个节点的儿子个数均不超过 3。保证至少存在一种这样的方案。 Input 输入的第一行一个整数…

python functools.wraps保留被装饰函数属性

作用 普通装饰器 &#xff0c;会覆盖函数名称&#xff0c;并且 会替换 函数 文档字符串 介绍 functools.wraps(wrapped[, assigned][, updated]) This is a convenience function for invoking partial(update_wrapper, wrappedwrapped, assignedassigned, updatedupdated) …

城市生命线丨桥梁健康监测系统应用详情

现代城市当中&#xff0c;桥梁的重要性以及危险性是最高的&#xff0c;因此&#xff0c;对于桥梁的安全健康监测就会变得更加的重要&#xff0c;在科技发展的今天&#xff0c;新型基础设施已经能够准确、实时的监测桥梁的安全和健康。 WITBEE万宾助力建设更健康&#xff0c;智慧…

sentinel 网关

网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去调用。 这样的架构&#xff0c;会存在…

【Python】12 GPflow安装

概述 GPflow 是一个基于TensorFlow 在 Python 中构建高斯过程模型的包。高斯过程是一种监督学习模型。 高斯过程的一些优点是&#xff1a; 不确定性是高斯过程的固有部分。高斯过程可以在不知道答案时告诉您。适用于小型数据集。如果您的数据有限&#xff0c;高斯过程可以从…

Yolov8部署——vs2019遇到的问题

Yolov8部署——vs2019遇到的问题 问题一&#xff1a; 默认库"LIBCMT"与其他库的使用冲突 解决方法&#xff1a;选择自己的项目右键属性——c/c——代码生成——运行库&#xff08;多线程&#xff08;/MT&#xff09; 问题二&#xff1a; 文件包含在偏移0x18处开始…