LankyMoose/docs.sheetjs.com
1
Fork 0
forked from sheetjs/docs.sheetjs.com
Code Pull Requests Activity
98a3b79e9c
docs.sheetjs.com/docz/docs/03-demos/02-frontend/19-bundler/index.md

321 lines
8.1 KiB
Markdown
Raw Normal View History

worker
2022-07-17 03:47:27 +00:00
---
title: Bundlers
cloud
2023-01-10 00:31:37 +00:00
pagination_prev: demos/index
react
2023-02-28 11:40:44 +00:00
pagination_next: demos/grid/index
bundler
2023-10-18 02:07:06 +00:00
sidebar_position: 19
frontend
2023-01-09 05:08:30 +00:00
sidebar_custom_props:
skip: 1
worker
2022-07-17 03:47:27 +00:00
---
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
headless
2023-04-29 11:21:37 +00:00
import CodeBlock from '@theme/CodeBlock';
darwin-arm
2023-10-19 05:23:55 +00:00
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
worker
2022-07-17 03:47:27 +00:00
bundler
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.
esbuild
2022-07-20 08:58:29 +00:00
cell
2023-09-22 06:32:55 +00:00
:::note pass
esbuild
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.
:::
darwin-arm
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>
esbuild
2022-07-20 08:58:29 +00:00
dojo
2022-08-30 22:12:52 +00:00
## Dojo
abslinks
2022-10-30 05:45:37 +00:00
Integration details are included [in the "AMD" installation](/docs/getting-started/installation/amd#dojo-toolkit)
dojo
2022-08-30 22:12:52 +00:00
dojo
2023-11-28 07:05:59 +00:00
Complete Examples are included [in the "Dojo" demo](/docs/demos/frontend/dojo)
dojo
2022-08-30 22:12:52 +00:00
bun-bun-bun
2023-10-22 05:40:02 +00:00
## Snowpack
worker
2022-07-17 03:47:27 +00:00
bun-bun-bun
2023-10-22 05:40:02 +00:00
Snowpack works with no caveats.
esbuild
2022-07-20 08:58:29 +00:00
mdx cleanup in preparation for v2 - use autolinks (e.g <https://sheetjs.com> -> https://sheetjs.com) - move <summary> blocks to separate lines
2024-04-08 04:47:04 +00:00
<details>
<summary><b>Complete Example</b> (click to show)</summary>
worker
2022-07-17 03:47:27 +00:00
refresh
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
requirejs
2023-05-09 08:08:01 +00:00
refresh
2023-12-05 03:46:54 +00:00
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `3.8.8` | 2023-12-04 |
requirejs
2023-05-09 08:08:01 +00:00
:::
bun-bun-bun
2023-10-22 05:40:02 +00:00
0) Initialize a new project:
worker
2022-07-17 03:47:27 +00:00
```bash
bun-bun-bun
2023-10-22 05:40:02 +00:00
mkdir sheetjs-snowpack
cd sheetjs-snowpack
npm init -y
worker
2022-07-17 03:47:27 +00:00
```
snowpack
2022-07-25 20:48:10 +00:00
1) Install the tarball using a package manager:
eleventy
2023-05-07 13:58:36 +00:00
<Tabs groupId="pm">
snowpack
2022-07-25 20:48:10 +00:00
<TabItem value="npm" label="npm">
eleventy
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
webpack
2022-08-07 07:48:40 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
eleventy
2023-05-07 13:58:36 +00:00
</CodeBlock>
snowpack
2022-07-25 20:48:10 +00:00
</TabItem>
<TabItem value="pnpm" label="pnpm">
eleventy
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
pnpm install supports --save
2024-03-20 07:05:29 +00:00
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
eleventy
2023-05-07 13:58:36 +00:00
</CodeBlock>
snowpack
2022-07-25 20:48:10 +00:00
</TabItem>
<TabItem value="yarn" label="Yarn" default>
eleventy
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
webpack
2022-08-07 07:48:40 +00:00
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
eleventy
2023-05-07 13:58:36 +00:00
</CodeBlock>
snowpack
2022-07-25 20:48:10 +00:00
</TabItem>
</Tabs>
2) Save the following to `index.js`:
```js title="index.js"
// highlight-next-line
frontend
2023-01-09 05:08:30 +00:00
import { utils, version, writeFileXLSX } from 'xlsx';
snowpack
2022-07-25 20:48:10 +00:00
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
azure
2022-08-21 19:43:30 +00:00
const url = "https://sheetjs.com/data/executive.json";
snowpack
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"));
refresh
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));
snowpack
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 */
vite
2022-07-26 10:49:14 +00:00
writeFileXLSX(workbook, "Presidents.xlsx");
snowpack
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>
```
cell
2023-09-22 06:32:55 +00:00
:::note pass
snowpack
2022-07-25 20:48:10 +00:00
Unlike other bundlers, Snowpack requires a full page including `HEAD` element.
:::
4) Build for production:
```bash
requirejs
2023-05-09 08:08:01 +00:00
npx snowpack@3.8.8 build
snowpack
2022-07-25 20:48:10 +00:00
```
uxp
2023-05-03 03:40:40 +00:00
5) Start a local HTTP server, then go to `http://localhost:8080/`
snowpack
2022-07-25 20:48:10 +00:00
```bash
npx http-server build/
```
Click on "Click here to export" to generate a file.
</details>
vite
2022-07-26 10:49:14 +00:00
bun-bun-bun
2023-10-22 05:40:02 +00:00
## WMR
vite
2022-07-26 10:49:14 +00:00
bun-bun-bun
2023-10-22 05:40:02 +00:00
WMR works with no caveats.
vite
2022-07-26 10:49:14 +00:00
mdx cleanup in preparation for v2 - use autolinks (e.g <https://sheetjs.com> -> https://sheetjs.com) - move <summary> blocks to separate lines
2024-04-08 04:47:04 +00:00
<details>
<summary><b>Complete Example</b> (click to show)</summary>
vite
2022-07-26 10:49:14 +00:00
refresh
2023-12-05 03:46:54 +00:00
:::note Tested Deployments
requirejs
2023-05-09 08:08:01 +00:00
refresh
2023-12-05 03:46:54 +00:00
This demo was tested in the following environments:
| Version | Date |
|:--------|:-----------|
| `3.8.0` | 2023-12-04 |
requirejs
2023-05-09 08:08:01 +00:00
:::
bun-bun-bun
2023-10-22 05:40:02 +00:00
0) Initialize a new project:
vite
2022-07-26 10:49:14 +00:00
visibility
2023-08-20 20:39:35 +00:00
```bash
bun-bun-bun
2023-10-22 05:40:02 +00:00
mkdir sheetjs-wmr
cd sheetjs-wmr
npm init -y
vite
2022-07-26 10:49:14 +00:00
```
rollup
2022-07-31 18:48:02 +00:00
1) Install the tarball using a package manager:
eleventy
2023-05-07 13:58:36 +00:00
<Tabs groupId="pm">
rollup
2022-07-31 18:48:02 +00:00
<TabItem value="npm" label="npm">
eleventy
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
webpack
2022-08-07 07:48:40 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
eleventy
2023-05-07 13:58:36 +00:00
</CodeBlock>
rollup
2022-07-31 18:48:02 +00:00
</TabItem>
<TabItem value="pnpm" label="pnpm">
eleventy
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
pnpm install supports --save
2024-03-20 07:05:29 +00:00
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
eleventy
2023-05-07 13:58:36 +00:00
</CodeBlock>
rollup
2022-07-31 18:48:02 +00:00
</TabItem>
<TabItem value="yarn" label="Yarn" default>
eleventy
2023-05-07 13:58:36 +00:00
<CodeBlock language="bash">{`\
webpack
2022-08-07 07:48:40 +00:00
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
eleventy
2023-05-07 13:58:36 +00:00
</CodeBlock>
rollup
2022-07-31 18:48:02 +00:00
</TabItem>
</Tabs>
2) Save the following to `index.js`:
```js title="index.js"
// highlight-next-line
frontend
2023-01-09 05:08:30 +00:00
import { utils, version, writeFileXLSX } from 'xlsx';
rollup
2022-07-31 18:48:02 +00:00
document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
azure
2022-08-21 19:43:30 +00:00
const url = "https://sheetjs.com/data/executive.json";
rollup
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"));
refresh
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));
rollup
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
requirejs
2023-05-09 08:08:01 +00:00
npx wmr@3.8.0 build
rollup
2022-07-31 18:48:02 +00:00
```
uxp
2023-05-03 03:40:40 +00:00
5) Start a local HTTP server in `dist` folder and go to `http://localhost:8080/`
rollup
2022-07-31 18:48:02 +00:00
```bash
npx http-server dist/
```
Click on "Click here to export" to generate a file.
</details>
bun-bun-bun
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)**
Copy Permalink