esbuild - 快速入门

最新推荐文章于 2024-09-30 21:41:05 发布

共沐春鳅

最新推荐文章于 2024-09-30 21:41:05 发布

阅读量468

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_61270298/article/details/129807331

版权

基础使用

安装

npm install esbuild -S -D

确认安装成功

.\node_modules\.bin\esbuild --version

初体验

使用 react 作为示例

cnpm install react react-dom -D -S

在目录下新建文件

app.jsx

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

构建输出

package.json

"scripts": {
  "test1": "esbuild app.jsx --bundle --outfile=out.js"
}

npm run test1

获取到产物

在目录下会生成 out.js 文件，内部包含了 React 代码和业务代码，不再依赖于 node_modules

运行产物

node out.js

可以得到控制台输出

<h1>Hello, world!</h1>

🐳 想要在 .js 文件中使用 JSX 语法，可以在命令行添加 --loader:.js=JSX 表示允许这种做法。

使用配置文件

在选项过多时，建议使用配置文件代替命令行；
这里的代码需保存在 .mjs 后缀名的文件中，因为使用了 import 和顶级 await。

import * as esbuild from 'esbuild'

// 返回 promise
await esbuild.build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
})

🐳 示例为异步风格的 API，能够满足插件的环境；同步 API 不建议使用，除非需要在 Node 中做特定事情。

用于浏览器

默认情况下构建的 bundler 是用于浏览器的；

开发版本，希望使用 --sourcemap 映射源码；

生产版本，希望启用 --minify 压缩、支持目标浏览器（将较新的js语法转成旧的）；

全部都使用上的话，命令行大概是这个形式：

esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16

用于Node.js

在 Node 中使用 bundler 不是必须的，但使用 esbuild 处理仍有好处；
如将 ES Module 转化为 CommonJS，将较新的 JavaScript 语法转成旧语法，发布前压缩；
如果 esbuild 需要构建 Node 中使用的包，应该添加如下参数，
```
--plaform=node
```
它默认将内置模块，如 fs 标记为外部包，从而不会构建到 bundle 中

使用新的 JavaScript 语法

如果代码中使用了较新的语法，在 Node 当中不能生效，需要指定 Node 的目标版本：

esbuild app.js --bundle --platform=node --target=node10.4

排除依赖

很多 Node 特性是 esbuild 不能支持的，如 __dirname、fs.readFileSync，

通过将包设置为外部，可以从捆绑包中排除所有依赖项，

这样做的话，需要保证相关依赖在运行时存在于文件系统中。

esbuild app.jsx --bundle --platform=node --packages=external

API

使用命令行方式时，要理解不同标志类型的作用

标志类型	示例	说明
–foo	–minify	是否启用的布尔标志
–foo=var	–platform=	单个值，只能指定一次
–foo:bar	–external:	多个值，可以指定多次

自动重新构建

有三种模式提供这方面的支持；
可以组合使用，如想要在保存文件时，实时重新加载页面，需要组合使用 Watch Mode 和 Serve Mode

Watch Mode

在文件修改时自动重新构建

esbuild app.ts --bundle --outdir=dist --watch

[watch] build finished, watching for changes...

Serve Mode

会启用本地服务器，提供最新构建结果

esbuild app.ts --bundle --outdir=dist --serve

 > Local:   http://127.0.0.1:8000/
 > Network: http://192.168.0.1:8000/

Rebuild Mode

手动调用重新构建的 API，命令行方式不支持配置

// 略

transformt特性

常用于压缩代码、将 TypeScript 转换为 JavaScript 等

import * as esbuild from 'esbuild'

let ts = 'let x: number = 1'
let result = await esbuild.transform(ts, {
  loader: 'ts',
})
console.log(result)

常用选项

选项	说明
bundle	esbuild 默认不会将依赖（包括依赖的依赖）内联到 bundle 中，需要显式启用
bundle	如果不开启，依赖只会通过模块语法来简单的引入
通用	绑定在编译时进行，故不支持动态的导入路径
cancel	使用 cancel 可以实现取消正在进行的手动构建，以便开始新的构建
platform	默认，构建的 bundle 是用于浏览器的，想要构建用于 Node，需指定平台
平台设置为浏览器(默认)	启用绑定后，默认输出格式设置为iife，立即执行函数可以避免变量污染
external	将文件/包标记为外部资源，保留导入，而不是内联到 bundle
external	导入保留方式：require(iife、cjs)；import(esm)