This commit is contained in:
SheetJS 2023-10-10 22:18:57 -04:00
parent 0ee20fd040
commit f57d38c58b
3 changed files with 41 additions and 11 deletions

@ -1,5 +1,6 @@
---
title: Webpack
title: Packing Sheets with Webpack
sidebar_label: Webpack
pagination_prev: demos/net/index
pagination_next: demos/mobile/index
sidebar_custom_props:
@ -9,6 +10,19 @@ sidebar_custom_props:
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
[Webpack](https://webpack.js.org/) is a modern build tool for generating static
sites. It has a robust JavaScript-powered plugin system[^1]
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
This demo uses Webpack and SheetJS to pull data from a spreadsheet and display
the content in an HTML table. We'll explore how to load SheetJS in a Webpack 5
Asset Plugin and generate data for use in webpages.
The ["Webpack 5 Demo"](#webpack-5-demo) creates a complete website powered by a
XLSX spreadsheet.
:::info pass
This demo covers static asset imports. For processing files in the browser, the
@ -17,15 +31,15 @@ importing the SheetJS library in a browser script.
:::
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
from Webpack loader scripts.
## Webpack 5 Asset Module
Webpack 5 supports asset modules. With a special option, the loader will receive
NodeJS Buffers that can be parsed. The dev server will even watch the files and
reload the page in development mode!
The [SheetJS NodeJS module](/docs/getting-started/installation/nodejs) can be
imported from Webpack loader scripts.
The following diagram depicts the workbook waltz:
```mermaid
@ -100,11 +114,12 @@ module.exports = {
The SheetJS loader script must export a `raw` property that is set to `true`.
The base export is expected to be the loader function. That function receives
the file contents as a Buffer, which can be parsed with `XLSX.read`. Typically
this script is CommonJS so the `require` form should be used.
The base export is expected to be the loader function. The loader receives the
file bytes as a Buffer, which can be parsed with the SheetJS `read` method[^2].
`read` returns a SheetJS workbook object[^3].
The loader in this demo will parse the first worksheet:
The loader in this demo will parse the workbook, pull the first worksheet, and
generate an array of row objects using the `sheet_to_json` method[^4]:
```js title="sheetjs-loader.js"
const XLSX = require("xlsx");
@ -144,7 +159,7 @@ document.body.appendChild(elt);
:::note
This demo was last tested on 2023 May 24 against Webpack 5.84.0
This demo was last tested on 2023 October 10 against Webpack 5.88.2
:::
@ -156,7 +171,7 @@ This demo was last tested on 2023 May 24 against Webpack 5.84.0
mkdir sheetjs-wp5
cd sheetjs-wp5
npm init -y
npm install webpack@5.84.0 webpack-cli@5.1.1 webpack-dev-server@4.15.0 --save
npm install webpack@5.88.2 webpack-cli@5.1.4 webpack-dev-server@4.15.1 --save
mkdir -p dist
mkdir -p src
mkdir -p data
@ -303,3 +318,8 @@ the file and save. The page will not automatically update.
To verify that the data was added to the page, append `main.js` to the URL
(`http://localhost:8080/main.js`) and view the source. The source will include
president names. It will not include SheetJS library references!
[^1]: See ["Plugins"](https://webpack.js.org/concepts/plugins/) in the Webpack documentation.
[^2]: See [`read` in "Reading Files"](/docs/api/parse-options)
[^3]: See ["Workbook Object"](/docs/csf/book)
[^4]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)

@ -17,6 +17,14 @@ it is feasible to build command-line tools for various workflows.
This demo covers a number of strategies for building standalone processors. The
goal is to generate CSV output from an arbitrary spreadsheet file.
:::tip pass
The [`xlsx-cli`](https://cdn.sheetjs.com/xlsx-cli/) NodeJS script is available
as a package on the SheetJS CDN. It is an easy-to-use command-line tool for
translating files between supported spreadsheet file formats.
:::
## NodeJS
There are a few popular tools for compiling NodeJS scripts to CLI programs.
@ -53,7 +61,7 @@ This demo was tested in the following deployments:
| Architecture | Version | Node Target | Date |
|:-------------|:-------------|:------------|:-----------|
| `darwin-x64` | `4.0.0-rc.2` | `14.15.3` | 2023-05-08 |
| `darwin-x64` | `4.0.0-rc.2` | `14.15.3` | 2023-10-10 |
| `darwin-arm` | `4.0.0-rc.2` | `20.7.0` | 2023-09-25 |
| `win10-x64` | `4.0.0-rc.2` | `14.15.3` | 2023-10-09 |
| `win11-arm` | `4.0.0-rc.2` | `18.17.1` | 2023-09-25 |

@ -61,6 +61,7 @@ program
.option('-F, --field-sep <sep>', 'CSV field separator', ",")
.option('-R, --row-sep <sep>', 'CSV row separator', "\n")
.option('-n, --sheet-rows <num>', 'Number of rows to process (0=all rows)')
.option('--date-format <string>', 'output date format, for example yyyy-mm-dd')
.option('--codepage <cp>', 'default to specified codepage when ambiguous')
.option('--sst', 'generate shared string table for XLS* formats')
.option('--compress', 'use compression when writing XLSX/M/B and ODS')
@ -154,6 +155,7 @@ if(program.all) {
}
if(program.sparse) opts.dense = false; else opts.dense = true;
if(program.codepage) opts.codepage = +program.codepage;
if(program.dateFormat) opts.dateNF = program.dateFormat;
if(program.dev) {
opts.WTF = true;