打包器

SheetJS 早于 ECMAScript 模块和大多数打包工具。随着最佳实践的发展，压力测试 SheetJS 库揭示了打包器和其他工具中的错误。该演示收集了各种注释并提供了基本示例。

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

应将问题报告给相应的打包器项目。通常，如果该工具无法正确处理 JS 库，则被视为打包器错误。

¥Issues should be reported to the respective bundler projects. Typically it is considered a bundler bug if the tool cannot properly handle JS libraries.

以下工具包含在单独的页面中：

¥The following tools are covered in separate pages:

Dojo

包含集成详细信息在 "AMD" 安装中

¥Integration details are included in the "AMD" installation

包含完整示例在 "Dojo" 演示中

¥Complete Examples are included in the "Dojo" demo

Snowpack

Snowpack 是 AstroJS 团队构建的开发工具。

¥Snowpack was a development tool built by the AstroJS team.

Snowpack 不再维护。开发商推荐 ViteJS

¥Snowpack is no longer maintained. The developers recommend ViteJS

Snowpack 的工作方式没有任何警告。

¥Snowpack works with no caveats.

Complete Example (click to show)

Tested Deployments

This demo was tested in the following environments:

Version	Date
`3.8.8`	2024-04-14

Initialize a new project:

mkdir sheetjs-snowpack
cd sheetjs-snowpack
npm init -y

Install the tarball using a package manager:

npm
pnpm
Yarn

npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

pnpm install --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

Save the following to index.js:

index.js
import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://xlsx.nodejs.cn/executive.json";
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"));

/* 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));

/* 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");
});

Create a small HTML page that loads the script. Save to index.html:

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>

Unlike other bundlers, Snowpack requires a full page including HEAD element.

Build for production:

npx snowpack@3.8.8 build

Start a local HTTP server, then go to http://localhost:8080/

npx http-server build/

Click on "Click here to export" to generate a file.

WMR

WMR 是 PreactJS 团队构建的开发工具。

¥WMR was a development tool built by the PreactJS team.

WMR 不再维护。开发商推荐 ViteJS

¥WMR is no longer maintained. The developers recommend ViteJS

WMR 的工作方式没有任何警告。

¥WMR works with no caveats.

Complete Example (click to show)

Tested Deployments

This demo was tested in the following environments:

Version	Date
`3.8.0`	2024-04-14

Initialize a new project:

mkdir sheetjs-wmr
cd sheetjs-wmr
npm init -y

Install the tarball using a package manager:

npm
pnpm
Yarn

npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

pnpm install --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz

Save the following to index.js:

index.js
import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://xlsx.nodejs.cn/executive.json";
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"));

/* 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));

/* 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");
});

Create a small HTML page that loads the script. Save to index.html:

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>

Build for production:

npx wmr@3.8.0 build

Start a local HTTP server in dist folder and go to http://localhost:8080/

npx http-server dist/

Click on "Click here to export" to generate a file.

Dojo​

Snowpack​

WMR​

Browserify​

Bun​

esbuild​

Parcel​

RequireJS​

Rollup​

SWC​

SystemJS​

Vite​

Webpack​

Dojo

Snowpack

WMR

Browserify

Bun

esbuild

Parcel

RequireJS

Rollup

SWC

SystemJS

Vite

Webpack