5.4 KiB
| title | sidebar_label | pagination_prev | pagination_next | sidebar_position |
|---|---|---|---|---|
| Bundling Sheets with ESBuild | ESBuild | demos/index | demos/grid/index | 4 |
import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock';
ESBuild is a fast module bundler for JavaScript. It combines scripts and libraries into simple scripts for browsers and NodeJS.
SheetJS is a JavaScript library for reading and writing data from spreadsheets.
This demo uses ESBuild and SheetJS to export data. We'll explore two workflows:
-
"Browser" explores how to import SheetJS libraries in a script and bundle with ESBuild for browser use.
-
"NodeJS" explores how to import SheetJS libraries in a script and bundle with ESBuild for NodeJS use.
:::info pass
The ESBuild section of the Content demo covers loaders. They are ideal for static sites pulling data from sheets at build time.
:::
:::note pass
This demo focuses on integration details with the ESBuild bundler.
The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.
:::
:::note Tested Deployments
This demo was tested in the following environments:
| ESBuild | Date |
|---|---|
0.14.14 |
2023-12-04 |
0.19.8 |
2023-12-04 |
:::
Integration Details
The "Frameworks" section covers installation with Yarn and other package managers.
Browser
ESBuild will bundle the SheetJS ECMAScript Module build:
import { read, utils, writeFileXLSX } from 'xlsx';
:::note pass
The xlsx.mjs source file uses a subset of ES6 that esbuild understands and
is able to transpile for older browsers.
:::
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
- Prepare a blank project:
mkdir sheetjs-esbrowser
cd sheetjs-esbrowser
npm init -y
- Install the tarball using a package manager:
- Download
esbrowser.jsand move to the project folder:
curl -LO https://docs.sheetjs.com/esbuild/esbrowser.js
- Create a small HTML page that loads the script. Save to
index.html:
<body><script src="esb.browser.js"></script></body>
- Create bundle:
npx -y esbuild@0.19.8 esbrowser.js --bundle --outfile=esb.browser.js
- Start a local HTTP server:
npx http-server .
Access the displayed URL (typically http://localhost:8080) with a web browser.
It should attempt to download Presidents.xlsx
NodeJS
ESBuild will bundle the SheetJS ECMAScript Module build:
import { read, utils, write } from 'xlsx';
:::caution pass
To read and write files on the local filesystem using the SheetJS readFile and
writeFile methods1, 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");
:::
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 Demo
:::info pass
This demo script uses fetch and requires Node 18+.
:::
- Prepare a blank project:
mkdir sheetjs-esbnode
cd sheetjs-esbnode
npm init -y
- Install the tarball using a package manager:
- Download
esbnode.jsand move to the project folder:
curl -LO https://docs.sheetjs.com/esbuild/esbnode.js
- Create bundle:
npx -y esbuild@0.19.8 esbnode.js --bundle --platform=node --outfile=esb.node.js
- Run the bundle:
node esb.node.js
The process will generate Presidents.xlsx in the project directory. Open the
file in a spreadsheet editor.