From 4e0187005a03956d70563d3686b34ed53e140b5e Mon Sep 17 00:00:00 2001 From: SheetJS Date: Sun, 7 Aug 2022 03:48:40 -0400 Subject: [PATCH] webpack --- docz/docs/02-installation/01-standalone.mdx | 2 +- docz/docs/02-installation/02-frameworks.md | 18 +- docz/docs/02-installation/04-nodejs.md | 24 +- docz/docs/03-example.mdx | 4 +- .../03-demos/03-database.md | 6 +- .../04-getting-started/03-demos/09-bundler.md | 238 +++++++++++++++--- .../docs/04-getting-started/03-demos/index.md | 5 +- docz/docs/06-solutions/01-input.md | 4 +- docz/docs/08-api/07-write-options.md | 4 +- 9 files changed, 242 insertions(+), 63 deletions(-) diff --git a/docz/docs/02-installation/01-standalone.mdx b/docz/docs/02-installation/01-standalone.mdx index 1091172..5b50fde 100644 --- a/docz/docs/02-installation/01-standalone.mdx +++ b/docz/docs/02-installation/01-standalone.mdx @@ -161,7 +161,7 @@ Bower is deprecated and the maintainers recommend using other tools. [Bower](https://bower.io/) plays nice with the CDN tarballs:
{`\
-$ npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
Bower will place the standalone scripts in `bower_components/js-xlsx/dist/` diff --git a/docz/docs/02-installation/02-frameworks.md b/docz/docs/02-installation/02-frameworks.md index 720fc51..0810138 100644 --- a/docz/docs/02-installation/02-frameworks.md +++ b/docz/docs/02-installation/02-frameworks.md @@ -18,17 +18,17 @@ proper ECMAScript Module release which can be optimized with developer tools.
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -53,20 +53,20 @@ For existing projects, the easiest approach is to uninstall and reinstall:
{`\
-$ npm rm --save xlsx
-$ npm i --save file:vendor/xlsx-${current}.tgz`}
+npm rm --save xlsx
+npm i --save file:vendor/xlsx-${current}.tgz`}
 
{`\
-$ pnpm rm xlsx
-$ pnpm install file:vendor/xlsx-${current}.tgz`}
+pnpm rm xlsx
+pnpm install file:vendor/xlsx-${current}.tgz`}
 
{`\
-$ yarn remove xlsx
-$ yarn add file:vendor/xlsx-${current}.tgz`}
+yarn remove xlsx
+yarn add file:vendor/xlsx-${current}.tgz`}
 
diff --git a/docz/docs/02-installation/04-nodejs.md b/docz/docs/02-installation/04-nodejs.md index 6c9cdd4..8c2941c 100644 --- a/docz/docs/02-installation/04-nodejs.md +++ b/docz/docs/02-installation/04-nodejs.md @@ -23,17 +23,17 @@ Tarballs can be directly installed using a package manager:
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -52,20 +52,20 @@ For existing projects, the easiest approach is to uninstall and reinstall:
{`\
-$ npm rm --save xlsx
-$ npm i --save file:vendor/xlsx-${current}.tgz`}
+npm rm --save xlsx
+npm i --save file:vendor/xlsx-${current}.tgz`}
 
{`\
-$ pnpm rm xlsx
-$ pnpm install file:vendor/xlsx-${current}.tgz`}
+pnpm rm xlsx
+pnpm install file:vendor/xlsx-${current}.tgz`}
 
{`\
-$ yarn remove xlsx
-$ yarn add file:vendor/xlsx-${current}.tgz`}
+yarn remove xlsx
+yarn add file:vendor/xlsx-${current}.tgz`}
 
@@ -87,17 +87,17 @@ For general stability, "vendoring" modules is the recommended approach:
{`\
-$ npm i --save file:vendor/xlsx-${current}.tgz`}
+npm i --save file:vendor/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install file:vendor/xlsx-${current}.tgz`}
+pnpm install file:vendor/xlsx-${current}.tgz`}
 
{`\
-$ yarn add  file:vendor/xlsx-${current}.tgz`}
+yarn add  file:vendor/xlsx-${current}.tgz`}
 
diff --git a/docz/docs/03-example.mdx b/docz/docs/03-example.mdx index 14610b6..9211986 100644 --- a/docz/docs/03-example.mdx +++ b/docz/docs/03-example.mdx @@ -249,7 +249,7 @@ hosted (no `file:///` access). Install the dependencies: ```bash -$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz ``` Save the following script to `snippet.js` and run `node snippet.js`: @@ -297,7 +297,7 @@ like `axios` presents a similar API for fetching data: Install the dependencies: ```bash -$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz ``` The differences in the script are highlighted below. diff --git a/docz/docs/04-getting-started/03-demos/03-database.md b/docz/docs/04-getting-started/03-demos/03-database.md index a2a669b..1cde595 100644 --- a/docz/docs/04-getting-started/03-demos/03-database.md +++ b/docz/docs/04-getting-started/03-demos/03-database.md @@ -284,7 +284,7 @@ runs a prepared statement and returns an array of JS objects. 1) Install the dependencies: ```bash -$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz better-sqlite3 +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz better-sqlite3 ``` 2) Save the following to `node.mjs`: @@ -334,7 +334,7 @@ Bun ships with a built-in high-performance module `bun:sqlite`. 1) Install the dependencies: ```bash -$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz ``` 2) Save the following to `bun.mjs`: @@ -780,7 +780,7 @@ It was verified in Node 16.16.0. 1) Install the dependencies: ```bash -$ npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz mongodb +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz mongodb ``` 2) Start a MongoDB server on localhost (follow official instructions) diff --git a/docz/docs/04-getting-started/03-demos/09-bundler.md b/docz/docs/04-getting-started/03-demos/09-bundler.md index c92870a..42b05f1 100644 --- a/docz/docs/04-getting-started/03-demos/09-bundler.md +++ b/docz/docs/04-getting-started/03-demos/09-bundler.md @@ -46,17 +46,17 @@ Web Worker scripts can be bundled using the same approach.
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -98,17 +98,17 @@ local testing, a bundled script can save tens of milliseconds per run.
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -186,17 +186,17 @@ Both the `node` and `browser` platforms work out of the box.
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -264,17 +264,17 @@ npx http-server .
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -405,17 +405,17 @@ document.getElementById("xport").onclick = async() => {
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -472,17 +472,17 @@ Rollup requires `@rollup/plugin-node-resolve` to support NodeJS modules:
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
 
{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
 
{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
 
@@ -566,17 +566,17 @@ Snowpack works with no caveats.
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
@@ -665,17 +665,17 @@ SWC provides `spack` for bundling scripts.
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
 
{`\
-$ pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
 
{`\
-$ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
 
@@ -888,7 +888,7 @@ a `require` implementation when loading [`main.js`](pathname:///systemjs/main.js 1) Install the dependencies:
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz systemjs@0.19`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz systemjs@0.19`}
 
2) Save the following script to `SheetJSystem.js`: @@ -988,7 +988,7 @@ When prompted for **Framework**, select **`vue`** then **`vue-ts`** 2) Add the SheetJS dependency:
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
3) Replace `src\components\HelloWorld.vue` with: @@ -1054,6 +1054,186 @@ Access http://localhost:8080 in your web browser. +## Webpack + +The ECMAScript Module build has no `require` or `import` statements and does +not use `process` or any variable that Webpack could interpret as a NodeJS +feature. Various `package.json` fields have been added to appease various +Webpack versions starting from the `2.x` series. + +:::note CommonJS and ESM + +Webpack bundled the CommonJS build in older versions of the library. Version +`0.18.1` changed the NodeJS module package so that Webpack uses the ESM build. + +The ESM build does not include the codepage support library for XLS reading. +[As described in the installation instructions](../../installation/frameworks), +the codepage dependency should be imported explicitly: + +```js +import * as XLSX from 'xlsx'; +import * as cptable from 'xlsx/dist/cpexcel.full.mjs'; +set_cptable(cptable); +``` + +::: + +
Complete Example (click to show) + +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`}
+
+
+
+ +2) Save the following to `index.js`: + +```js title="index.js" +// highlight-next-line +import { utils, version, writeFileXLSX } from 'xlsx/xlsx.mjs'; + +document.getElementById("xport").addEventListener("click", async() => { +/* fetch JSON data and parse */ +const url = "https://sheetjs.com/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")); + +/* 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 `webpack.config.js` script that writes to `index.min.js`: + +```js title="webpack.config.js" +module.exports = { + /* entry point index.js */ + entry: './index.js', + + /* write to index.min.js */ + output: { path:__dirname, filename: './index.min.js' } +} +``` + +4) Build for production. The command depends on the version of webpack: + + + + +**Webpack 2.x** + +```bash +npx webpack@2.x -p +``` + +**Webpack 3.x** + +```bash +npx webpack@3.x -p +``` + +:::caution + +The minifier that ships with Webpack 2.x does not handle `async` functions. The +unminified code generated by Webpack will work for the purposes of the demo. It +is strongly recommended to upgrade to a newer version of Webpack. If that is +not feasible, the example should be replaced with a traditional Promise chain. + +::: + + + + +:::warning Pinning specific versions of webpack + +The webpack tooling is not designed for switching between versions. A specific +version above 4.0 can be pinned by locally installing webpack and the CLI tool. + +::: + +**Webpack 4.x** + +```bash +npm install --save webpack@4.x webpack-cli +npx webpack --mode=production +``` + +**Webpack 5.x** + +```bash +npm install --save webpack@5.x webpack-cli +npx webpack --mode=production +``` + +**Webpack latest** + +```bash +npm install --save webpack webpack-cli +npx webpack --mode=production +``` + + + + + +5) Create a small HTML page that loads the script. Save to `index.html`: + +```html title="index.html" + + + + +

SheetJS Presidents Demo

+ + + + +``` + +6) Start a local HTTP server and go to http://localhost:8080/ + +```bash +npx http-server . +``` + +Click on "Click here to export" to generate a file. + +
+ ## WMR WMR follows the same structure as Snowpack @@ -1065,17 +1245,17 @@ WMR follows the same structure as Snowpack
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
{`\
-$ pnpm install 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`}
+yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
diff --git a/docz/docs/04-getting-started/03-demos/index.md b/docz/docs/04-getting-started/03-demos/index.md index 222371c..657ed1e 100644 --- a/docz/docs/04-getting-started/03-demos/index.md +++ b/docz/docs/04-getting-started/03-demos/index.md @@ -21,7 +21,6 @@ The demo projects include small runnable examples and short explainers. - [`Angular.JS`](./legacy#angularjs) - [`Angular 2+ and Ionic`](https://github.com/SheetJS/SheetJS/tree/master/demos/angular2/) - [`Knockout`](./legacy#knockout) -- [`Meteor`](https://github.com/SheetJS/SheetJS/tree/master/demos/meteor/) - [`React, React Native and NextJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/react/) - [`VueJS, WeeX, and NuxtJS`](https://github.com/SheetJS/SheetJS/tree/master/demos/vue/) @@ -62,7 +61,7 @@ The demo projects include small runnable examples and short explainers. - [`rollup`](./bundler#rollup) - [`snowpack`](./bundler#snowpack) - [`swc`](./bundler#swc) -- [`systemjs`](https://github.com/SheetJS/SheetJS/tree/master/demos/systemjs/) +- [`systemjs`](./bundler#systemjs) - [`vite`](./bundler#vite) -- [`webpack 2.x`](https://github.com/SheetJS/SheetJS/tree/master/demos/webpack/) +- [`webpack`](./bundler#webpack) - [`wmr`](./bundler#wmr) diff --git a/docz/docs/06-solutions/01-input.md b/docz/docs/06-solutions/01-input.md index 6c08f9f..2511085 100644 --- a/docz/docs/06-solutions/01-input.md +++ b/docz/docs/06-solutions/01-input.md @@ -440,7 +440,7 @@ server.run();`} Deno must be run with the `--allow-net` flag to enable network requests: ```bash -$ deno run --allow-net test-server.ts +deno run --allow-net test-server.ts ``` To test, submit a POST request to http://localhost:7262 including a file: @@ -589,7 +589,7 @@ const workbook = XLSX.read(data);`} Deno must be run with the `--allow-net` flag to enable network requests: ``` -$ deno run --allow-net test-fetch.ts +deno run --allow-net test-fetch.ts ``` ::: diff --git a/docz/docs/08-api/07-write-options.md b/docz/docs/08-api/07-write-options.md index 3b91b7c..e36a414 100644 --- a/docz/docs/08-api/07-write-options.md +++ b/docz/docs/08-api/07-write-options.md @@ -89,7 +89,7 @@ XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression: After installing the package:
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
The scripts will be available at `xlsx/dist/xlsx.zahl` (CommonJS) and @@ -113,7 +113,7 @@ XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression: After installing the package:
{`\
-$ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
+npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
 
The scripts will be available at `xlsx/dist/xlsx.zahl` (CommonJS) and