From 53e534f2cca4c18ff1975d8d84f84f9a62177426 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Fri, 19 May 2017 12:46:03 -0400 Subject: [PATCH] systemjs node/browser examples [ci skip] --- demos/browserify/README.md | 6 +++ demos/systemjs/.gitignore | 2 + demos/systemjs/Makefile | 1 + demos/systemjs/README.md | 66 +++++++++++++++++++++++++++++++++ demos/systemjs/main.js | 5 +++ demos/webpack/README.md | 30 +++++++++++++++ demos/webpack/webpack.config.js | 3 -- 7 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 demos/browserify/README.md create mode 100644 demos/systemjs/.gitignore create mode 100644 demos/systemjs/README.md create mode 100644 demos/systemjs/main.js create mode 100644 demos/webpack/README.md diff --git a/demos/browserify/README.md b/demos/browserify/README.md new file mode 100644 index 0000000..281d33b --- /dev/null +++ b/demos/browserify/README.md @@ -0,0 +1,6 @@ +# Browserify + +The library is compatible with browserify and should just work out of the box. + +This demo uses the `require` form to expose the whole library, enabling client +code to just `require('xlsx')`. The included demo and Makefile do just that. diff --git a/demos/systemjs/.gitignore b/demos/systemjs/.gitignore new file mode 100644 index 0000000..319ff90 --- /dev/null +++ b/demos/systemjs/.gitignore @@ -0,0 +1,2 @@ +systemjs/ +xlsx.full.min.js diff --git a/demos/systemjs/Makefile b/demos/systemjs/Makefile index 7775a97..8c10081 100644 --- a/demos/systemjs/Makefile +++ b/demos/systemjs/Makefile @@ -1,3 +1,4 @@ .PHONY: test test: + cp ../../dist/xlsx.full.min.js . node systemjsnode.js diff --git a/demos/systemjs/README.md b/demos/systemjs/README.md new file mode 100644 index 0000000..4001e49 --- /dev/null +++ b/demos/systemjs/README.md @@ -0,0 +1,66 @@ +# SystemJS Demos + +SystemJS supports both browser and nodejs deployments. It does not recognize +browser environments and automatically suppress node core modules, but with some +configuration magic SystemJS can load the library. + +## Browser + +SystemJS fails by default because the library does not export anything in the +web browser. This is easily addressed in the config: + +```js +SystemJS.config({ + meta: { + 'xlsx': { + exports: 'XLSX' // <-- tell SystemJS to expose the XLSX variable + } + }, + map: { + 'xlsx': 'xlsx.full.min.js', // <-- make sure xlsx.full.min.js is in same dir + 'fs': '', // <--| + 'crypto': '', // <--| suppress native node modules + 'stream': '' // <--| + } +}); +SystemJS.import('main.js') +``` + +In your main JS script, just use require: + +```js +var XLSX = require('xlsx'); +var w = XLSX.read('abc,def\nghi,jkl', {type:'binary'}); +var j = XLSX.utils.sheet_to_json(w.Sheets[w.SheetNames[0]], {header:1}); +console.log(j); +``` + +The file functions `readFile` and `writeFile` are not available in the browser. + +## Node + +The node core modules should be mapped to their `@node` equivalents: + +```js +var SystemJS = require('systemjs'); +SystemJS.config({ + map: { + 'xlsx': 'node_modules/xlsx/xlsx.js', + 'fs': '@node/fs', + 'crypto': '@node/crypto', + 'stream': '@node/stream' + } +}); +``` + +And use is pretty straightforward: + +```js +SystemJS.import('xlsx').then(function(XLSX) { + /* XLSX is available here */ + var w = XLSX.readFile('test.xlsx'); + var j = XLSX.utils.sheet_to_json(w.Sheets[w.SheetNames[0]], {header:1}); + console.log(j); +}); +``` + diff --git a/demos/systemjs/main.js b/demos/systemjs/main.js new file mode 100644 index 0000000..f8dbfb9 --- /dev/null +++ b/demos/systemjs/main.js @@ -0,0 +1,5 @@ +var XLSX = require('xlsx'); +console.log(XLSX); +var w = XLSX.read('abc,def\nghi,jkl', {type:'binary'}); +var j = XLSX.utils.sheet_to_json(w.Sheets[w.SheetNames[0]], {header:1}); +console.log(j); diff --git a/demos/webpack/README.md b/demos/webpack/README.md new file mode 100644 index 0000000..6a98824 --- /dev/null +++ b/demos/webpack/README.md @@ -0,0 +1,30 @@ +# Webpack + +This library is built with some dynamic logic to determine if it is invoked in a +script tag or in nodejs. Webpack does not understand those feature tests, so by +default it will do some strange things. + +## Suppressing the Node shims + +The library properly guards against accidental leakage of node features in the +browser but webpack disregards those. The config should explicitly suppress: + +```js + node: { + fs: false, + process: false, + Buffer: false + } +``` + +## Exporting the XLSX variable + +This library will not assign to module.exports if it is run in the browser. To +convince webpack, set `output` in the webpack config: + +```js + output: { + libraryTarget: 'var', + library: 'XLSX' + } +``` diff --git a/demos/webpack/webpack.config.js b/demos/webpack/webpack.config.js index 37204be..6fbaa28 100644 --- a/demos/webpack/webpack.config.js +++ b/demos/webpack/webpack.config.js @@ -3,9 +3,6 @@ module.exports = { libraryTarget: 'var', library: 'XLSX' }, - module: { - noParse: [/jszip.js$/] - }, node: { fs: false, process: false,