docs.sheetjs.com/04-esbuild.md at master

5.4 KiB

Raw Permalink Blame History

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:

{`\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}

Download esbrowser.js and 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 methods¹, 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