Skip to main content

使用 ESBuild 打包工作表

ESBuild 是 JavaScript 的快速模块打包器。它将脚本和库组合成适用于浏览器和 NodeJS 的简单脚本。

¥ESBuild is a fast module bundler for JavaScript. It combines scripts and libraries into simple scripts for browsers and NodeJS.

SheetJS 是一个用于从电子表格读取和写入数据的 JavaScript 库。

¥SheetJS is a JavaScript library for reading and writing data from spreadsheets.

该演示使用 ESBuild 和 SheetJS 导出数据。我们将探讨两个工作流程：

¥This demo uses ESBuild and SheetJS to export data. We'll explore two workflows:

  • "浏览器" 探讨了如何在脚本中导入 SheetJS 库并与 ESBuild 打包在一起以供浏览器使用。

    ¥"Browser" explores how to import SheetJS libraries in a script and bundle with ESBuild for browser use.

  • "NodeJS" 探讨了如何在脚本中导入 SheetJS 库并与 ESBuild 打包以供 NodeJS 使用。

    ¥"NodeJS" explores how to import SheetJS libraries in a script and bundle with ESBuild for NodeJS use.

内容演示的 ESBuild 部分 涵盖加载器。它们非常适合静态站点在构建时从工作表中提取数据。

¥The ESBuild section of the Content demo covers loaders. They are ideal for static sites pulling data from sheets at build time.

该演示重点介绍与 ESBuild 打包器的集成细节。

¥This demo focuses on integration details with the ESBuild bundler.

这些演示遵循 "导出教程"，其中更详细地介绍了 SheetJS 库的用法。

¥The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.

测试部署

本 demo 在以下环境下进行了测试：

¥This demo was tested in the following environments:

ESBuild日期
0.21.42024-06-07
0.20.22024-06-07
0.19.122024-06-07
0.18.202024-06-07
0.17.192024-06-07
0.16.172024-06-07
0.15.182024-06-07
0.14.542024-06-07
0.13.152024-06-07
0.12.292024-06-07
0.11.232024-06-07
0.10.22024-06-07
0.9.72024-06-07

集成详情​

¥Integration Details

"构架" 章节 涵盖了 Yarn 和其他包管理器的安装。

¥The "Frameworks" section covers installation with Yarn and other package managers.

浏览器​

¥Browser

ESBuild 将打包 SheetJS ECMAScript 模块构建：

¥ESBuild will bundle the SheetJS ECMAScript Module build:

import { read, utils, writeFileXLSX } from 'xlsx';

xlsx.mjs 源文件使用 esbuild 理解的 ES6 子集，并且能够为旧版浏览器进行转换。

¥The xlsx.mjs source file uses a subset of ES6 that esbuild understands and is able to transpile for older browsers.

假设主要源文件是 in.js，以下命令将打包脚本并生成 out.js：

¥Assuming the primary source file is in.js, the following command will bundle the script and generate out.js:

npx -y esbuild@0.19.8 in.js --bundle --outfile=out.js

浏览器演示​

¥Browser Demo

  1. 准备一个空白项目：

    ¥Prepare a blank project:

mkdir sheetjs-esbrowser
cd sheetjs-esbrowser
npm init -y

  1. 使用包管理器安装 tarball：

    ¥Install the tarball using a package manager:

yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

  1. 下载 esbrowser.js 并移至项目文件夹：

    ¥Download esbrowser.js and move to the project folder:

curl -LO https://xlsx.nodejs.cn/esbuild/esbrowser.js

  1. 创建一个加载脚本的小型 HTML 页面。保存到 index.html：

    ¥Create a small HTML page that loads the script. Save to index.html:

index.html
<body><script src="esb.browser.js"></script></body>

  1. 创建打包包：

    ¥Create bundle:

npx -y esbuild@0.19.8 esbrowser.js --bundle --outfile=esb.browser.js

  1. 启动本地 HTTP 服务器：

    ¥Start a local HTTP server:

npx http-server .

使用 Web 浏览器访问显示的 URL（通常为 http://localhost:8080）。它应该尝试下载 Presidents.xlsx

¥Access the displayed URL (typically http://localhost:8080) with a web browser. It should attempt to download Presidents.xlsx

NodeJS​

ESBuild 将打包 SheetJS ECMAScript 模块构建：

¥ESBuild will bundle the SheetJS ECMAScript Module build:

import { read, utils, write } from 'xlsx';

要使用 SheetJS readFile 和 writeFile 方法 [^1] 在本地文件系统上读取和写入文件，必须手动添加 fs 模块：

¥To read and write files on the local filesystem using the SheetJS readFile and writeFile methods[^1], the fs module must be manually added:

import { set_fs, readFile } from 'xlsx';
import * as fs from 'fs';
set_fs(fs);

/* read pres.numbers in the same directory as the script */
const wb = readFile("pres.numbers");

假设主要源文件是 in.js，以下命令将打包 NodeJS 脚本并生成 out.js：

¥Assuming the primary source file is in.js, the following command will bundle the script for NodeJS and generate out.js:

npx -y esbuild@0.19.8 in.js --bundle --platform=node --outfile=out.js

NodeJS 演示​

¥NodeJS Demo

该演示脚本使用 fetch 并需要 Node 18+。

¥This demo script uses fetch and requires Node 18+.

  1. 准备一个空白项目：

    ¥Prepare a blank project:

mkdir sheetjs-esbnode
cd sheetjs-esbnode
npm init -y

  1. 使用包管理器安装 tarball：

    ¥Install the tarball using a package manager:

yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

  1. 下载 esbnode.js 并移至项目文件夹：

    ¥Download esbnode.js and move to the project folder:

curl -LO https://xlsx.nodejs.cn/esbuild/esbnode.js

  1. 创建打包包：

    ¥Create bundle:

npx -y esbuild@0.19.8 esbnode.js --bundle --platform=node --outfile=esb.node.js

  1. 运行打包包：

    ¥Run the bundle:

node esb.node.js

该过程会在项目目录下生成 Presidents.xlsx。在电子表格编辑器中打开该文件。

¥The process will generate Presidents.xlsx in the project directory. Open the file in a spreadsheet editor.

[^1]: SheetJS readFile 和 writeFile 方法使用 NodeJS fs 模块（如果可用）。它不会自动加载到 ECMAScript 模块构建中。

¥The SheetJS readFile and writeFile methods use the NodeJS fs module when available. It is not automatically loaded in the ECMAScript Module builds.