esbuild打包

2023-11-20 22:28
文章标签 打包 esbuild

本文主要是介绍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 功能代替。

这篇关于esbuild打包的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/397875

相关文章

springboot3打包成war包,用tomcat8启动

1、在pom中,将打包类型改为war <packaging>war</packaging> 2、pom中排除SpringBoot内置的Tomcat容器并添加Tomcat依赖,用于编译和测试,         *依赖时一定设置 scope 为 provided (相当于 tomcat 依赖只在本地运行和测试的时候有效,         打包的时候会排除这个依赖)<scope>provided

android6/7 system打包脚本

1.android5打包system就是网站上常见的制作ROM必备的解包打包system脚本 指令如下:mkuserimg.sh -s out/target/product/$TARGET_PRODUCT/system out/target/product/$TARGET_PRODUCT/obj/PACKAGING/systemimage_intermediates/system.img

android打包解包boot.img,system.img

原帖地址:http://www.52pojie.cn/thread-488025-1-1.html 转载Mark一下,日后研究 最近工作需要对boot.img,system.img进行破解。顺便将心得分享一下。 我的工作环境是在linux下的。所以工具都是针对linux的。 boot.img破解相关工具: 1、split_boot    perl脚本 2、boot_i

MTK Android P/Q system/vendor/super快速打包

一、Android 新版本默认开启了动态分区,把system vendor  product等分区打包成一个super分区。这对于我们使用替换分区的方法来排查问题不是很方便,直接替换一个super也不知道到底是哪个部分导致的。所以我们需要自己制作super.img来缩小范围。下面讲讲如何快速生成system、vendor、super,以及vbmeta(校验image,不匹配可能会导致不开机) 二

MTK AndroidP/Q快速打包ramdisk

一、Android P/Q ramdisk与老版本的差异 Android老版本的ramdisk是out下的root/ramdisk打包而来,里面包含了init  /sbin  init.rc   default.prop等文件。是一个完整的ramdisk Android新版本ramdisk分为了out 下的ramdisk目录和root目录,init ,init.rc等文件大部分都放到了syst

Android P/Q MTK平台无依赖打包boot.img

背景:        有时排查版本问题,需要用到替换img的方式来查找问题出现在哪个img,若出现在bootimg,那到底是kernel、DTB 还是ramdisk。此时就需要单独替换其中一个的方式来打包,之前直接make bootimage-nodeps就可以了,但现在发现执行这个命令无效了。下面就分析下新版本如何找到正确的打包命令。 一、找到编译boot的命令 之前Android编译lo

Qt5项目打包

笔者本来想尝试将项目在Windows环境和Linux环境下都打包发布,但是Linux环境下各种办法都尝试了,还是有点问题,先总结记录下吧。 参考文章:https://blog.csdn.net/windsnow1/article/details/78004265 http://www.cnblogs.com/lvdongjie/p/7250547.html http://doc.qt.io/ar

Java中WebService接口的生成、打包成.exe、设置成Windows服务、及其调用、Apache CXF调用

一、Java中WebService接口的生成: 1、在eclipse工具中新建一个普通的JAVA项目,新建一个java类:JwsServiceHello.java package com.accord.ws;import javax.jws.WebMethod;import javax.jws.WebService;import javax.xml.ws.Endpoint;/*** Ti

将 python 文件打包为exe文件

可以使用 PyInstaller 来将 Python 文件打包为可执行的 .exe 文件。以下是基本的步骤: 安装 PyInstaller: pip install pyinstaller 打包 Python 文件: 在终端中运行以下命令: pyinstaller --onefile your_script.py –onefile 选项将所有文件打包到一个 .exe 文件中。 找

0基础学习爬虫系列:程序打包部署

1.目标 将已经写好的python代码,打包独立部署或运营。 2. 环境准备 1)通义千问 :https://tongyi.aliyun.com/qianwen 2)0基础学习爬虫系列–网页内容爬取:https://blog.csdn.net/qq_36918149/article/details/141998185?spm=1001.2014.3001.5502 3. 步骤 1)不知道