docs.sheetjs.com/docz/docs/03-demos/01-frontend/19-bundler/04-esbuild.md
2023-10-21 21:42:08 -04:00

5.3 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.

:::note pass

This demo focuses on integration details with the ESBuild bundler.

The demos follow the "Export Tutorial". The tutorial covers SheetJS library usage.

:::

:::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

This demo was last tested on 2023 October 19 against esbuild 0.19.5

:::

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.5 in.js --bundle --outfile=out.js

Browser Demo

  1. Prepare a blank project:
mkdir sheetjs-esbrowser
cd sheetjs-esbrowser
npm init -y
  1. Install the tarball using a package manager:
{`\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
  1. Download esbrowser.js and move to the project folder:
curl -LO https://docs.sheetjs.com/esbuild/esbrowser.js
  1. Create a small HTML page that loads the script. Save to index.html:
<body><script src="esb.browser.js"></script></body>
  1. Create bundle:
npx -y esbuild@0.19.5 esbrowser.js --bundle --outfile=esb.browser.js
  1. 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.5 in.js --bundle --platform=node --outfile=out.js

NodeJS Demo

:::info pass

This demo script uses fetch and requires Node 18+.

:::

  1. Prepare a blank project:
mkdir sheetjs-esbnode
cd sheetjs-esbnode
npm init -y
  1. Install the tarball using a package manager:
{`\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} {`\ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
  1. Download esbnode.js and move to the project folder:
curl -LO https://docs.sheetjs.com/esbuild/esbnode.js
  1. Create bundle:
npx -y esbuild@0.19.5 esbnode.js --bundle --platform=node --outfile=esb.node.js
  1. Run the bundle:
node esb.node.js

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


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