docs.sheetjs.com/docz/docs/03-demos/02-frontend/19-bundler/index.md

321 lines
8.1 KiB
Markdown
Raw Normal View History

2022-07-17 03:47:27 +00:00
---
title: Bundlers
2023-01-10 00:31:37 +00:00
pagination_prev: demos/index
2023-02-28 11:40:44 +00:00
pagination_next: demos/grid/index
2023-10-18 02:07:06 +00:00
sidebar_position: 19
2023-01-09 05:08:30 +00:00
sidebar_custom_props:
skip: 1
2022-07-17 03:47:27 +00:00
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
2023-04-29 11:21:37 +00:00
import CodeBlock from '@theme/CodeBlock';
2023-10-19 05:23:55 +00:00
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
2022-07-17 03:47:27 +00:00
2023-10-18 02:07:06 +00:00
SheetJS predates ECMAScript modules and most bundler tools. As best practices
have evolved, stress testing SheetJS libraries have revealed bugs in bundlers
and other tools. This demo collects various notes and provides basic examples.
2022-07-20 08:58:29 +00:00
2023-09-22 06:32:55 +00:00
:::note pass
2022-07-20 08:58:29 +00:00
Issues should be reported to the respective bundler projects. Typically it is
considered a bundler bug if the tool cannot properly handle JS libraries.
:::
2023-10-19 05:23:55 +00:00
The following tools are covered in separate pages:
<ul>{useCurrentSidebarCategory().items.filter(item => !item?.customProps?.skip).map((item, index) => {
const listyle = (item.customProps?.icon) ? {
listStyleImage: `url("${item.customProps.icon}")`
} : {};
return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
<a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
</li>);
})}</ul>
2022-07-20 08:58:29 +00:00
2022-08-30 22:12:52 +00:00
## Dojo
2022-10-30 05:45:37 +00:00
Integration details are included [in the "AMD" installation](/docs/getting-started/installation/amd#dojo-toolkit)
2022-08-30 22:12:52 +00:00
2023-11-28 07:05:59 +00:00
Complete Examples are included [in the "Dojo" demo](/docs/demos/frontend/dojo)
2022-08-30 22:12:52 +00:00
2023-10-22 05:40:02 +00:00
## Snowpack
2022-07-17 03:47:27 +00:00
2023-10-22 05:40:02 +00:00
Snowpack works with no caveats.
2022-07-20 08:58:29 +00:00
<details>
<summary><b>Complete Example</b> (click to show)</summary>
2022-07-17 03:47:27 +00:00
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
2023-05-09 08:08:01 +00:00
2023-12-05 03:46:54 +00:00
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `3.8.8` | 2023-12-04 |
2023-05-09 08:08:01 +00:00
:::
2023-10-22 05:40:02 +00:00
0) Initialize a new project:
2022-07-17 03:47:27 +00:00
```bash
2023-10-22 05:40:02 +00:00
mkdir sheetjs-snowpack
cd sheetjs-snowpack
npm init -y
2022-07-17 03:47:27 +00:00
```
2022-07-25 20:48:10 +00:00
1) Install the tarball using a package manager:
2023-05-07 13:58:36 +00:00
<Tabs groupId="pm">
2022-07-25 20:48:10 +00:00
<TabItem value="npm" label="npm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-25 20:48:10 +00:00
</TabItem>
<TabItem value="pnpm" label="pnpm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2024-03-20 07:05:29 +00:00
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-25 20:48:10 +00:00
</TabItem>
<TabItem value="yarn" label="Yarn" default>
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-25 20:48:10 +00:00
</TabItem>
</Tabs>
2) Save the following to `index.js`:
```js title="index.js"
// highlight-next-line
2023-01-09 05:08:30 +00:00
import { utils, version, writeFileXLSX } from 'xlsx';
2022-07-25 20:48:10 +00:00
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
2022-08-21 19:43:30 +00:00
const url = "https://sheetjs.com/data/executive.json";
2022-07-25 20:48:10 +00:00
const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
2023-12-05 03:46:54 +00:00
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
2022-07-25 20:48:10 +00:00
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
2022-07-26 10:49:14 +00:00
writeFileXLSX(workbook, "Presidents.xlsx");
2022-07-25 20:48:10 +00:00
});
```
3) Create a small HTML page that loads the script. Save to `index.html`:
```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script type="module" src="./index.js"></script>
</body>
</html>
```
2023-09-22 06:32:55 +00:00
:::note pass
2022-07-25 20:48:10 +00:00
Unlike other bundlers, Snowpack requires a full page including `HEAD` element.
:::
4) Build for production:
```bash
2023-05-09 08:08:01 +00:00
npx snowpack@3.8.8 build
2022-07-25 20:48:10 +00:00
```
2023-05-03 03:40:40 +00:00
5) Start a local HTTP server, then go to `http://localhost:8080/`
2022-07-25 20:48:10 +00:00
```bash
npx http-server build/
```
Click on "Click here to export" to generate a file.
</details>
2022-07-26 10:49:14 +00:00
2023-10-22 05:40:02 +00:00
## WMR
2022-07-26 10:49:14 +00:00
2023-10-22 05:40:02 +00:00
WMR works with no caveats.
2022-07-26 10:49:14 +00:00
<details>
<summary><b>Complete Example</b> (click to show)</summary>
2022-07-26 10:49:14 +00:00
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
2023-05-09 08:08:01 +00:00
2023-12-05 03:46:54 +00:00
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `3.8.0` | 2023-12-04 |
2023-05-09 08:08:01 +00:00
:::
2023-10-22 05:40:02 +00:00
0) Initialize a new project:
2022-07-26 10:49:14 +00:00
2023-08-20 20:39:35 +00:00
```bash
2023-10-22 05:40:02 +00:00
mkdir sheetjs-wmr
cd sheetjs-wmr
npm init -y
2022-07-26 10:49:14 +00:00
```
2022-07-31 18:48:02 +00:00
1) Install the tarball using a package manager:
2023-05-07 13:58:36 +00:00
<Tabs groupId="pm">
2022-07-31 18:48:02 +00:00
<TabItem value="npm" label="npm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-31 18:48:02 +00:00
</TabItem>
<TabItem value="pnpm" label="pnpm">
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2024-03-20 07:05:29 +00:00
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-31 18:48:02 +00:00
</TabItem>
<TabItem value="yarn" label="Yarn" default>
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
2022-08-07 07:48:40 +00:00
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
2023-05-07 13:58:36 +00:00
</CodeBlock>
2022-07-31 18:48:02 +00:00
</TabItem>
</Tabs>
2) Save the following to `index.js`:
```js title="index.js"
// highlight-next-line
2023-01-09 05:08:30 +00:00
import { utils, version, writeFileXLSX } from 'xlsx';
2022-07-31 18:48:02 +00:00
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
2022-08-21 19:43:30 +00:00
const url = "https://sheetjs.com/data/executive.json";
2022-07-31 18:48:02 +00:00
const raw_data = await (await fetch(url)).json();
/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));
2023-12-05 03:46:54 +00:00
/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));
2022-07-31 18:48:02 +00:00
/* flatten objects */
const rows = prez.map(row => ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}));
/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});
```
3) Create a small HTML page that loads the script. Save to `index.html`:
```html title="index.html"
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>SheetJS Presidents Demo</h1>
<button id="xport">Click here to export</button>
<script type="module" src="./index.js"></script>
</body>
</html>
```
4) Build for production:
```bash
2023-05-09 08:08:01 +00:00
npx wmr@3.8.0 build
2022-07-31 18:48:02 +00:00
```
2023-05-03 03:40:40 +00:00
5) Start a local HTTP server in `dist` folder and go to `http://localhost:8080/`
2022-07-31 18:48:02 +00:00
```bash
npx http-server dist/
```
Click on "Click here to export" to generate a file.
</details>
2023-10-22 05:40:02 +00:00
#### Browserify
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/browserify)**
#### Bun
**[The exposition has been moved to a separate page.](/docs/getting-started/installation/bun#bundling)**
#### esbuild
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/esbuild)**
#### Parcel
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/parcel)**
#### RequireJS
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/requirejs)**
#### Rollup
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/rollup)**
#### SWC
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/swcpack)**
#### SystemJS
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/systemjs)**
#### Vite
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/vitejs)**
#### Webpack
**[The exposition has been moved to a separate page.](/docs/demos/frontend/bundler/webpack)**