ECMAScript modules (ESM) for newer browsers

The ESM distribution target the latest browsers with support for ECMAScript modules introduced by ES6.

Compared with the Node.js version, this distribution bundles polyfills to run outside of the Node.js environment.

Modern web browsers import ECMAScript modules nativelly and it also works within webpack and other alternative bundlers. Two demonstrations are available:

A Vanilla Javascript application with Express targeting web browsers with module support.
A web application bundled with webpack.

Usage

The files are located inside the packages/{package}/dist/esm folders. Import them inside your project or use NPM to download the package and to reference them:

If using the csv package:

If using individual packages:

When using NPM to manage and load your modules, for example within webpack, use:

import * as csv from 'csv-parse/browser/esm/index.js';
// Or
import * as csv from 'csv-parse/browser/esm/sync.js';

Integration

ESM code is imported from a script tag with the module type:

<script type="module">
// Import your modules and insert your code
</script>

When using the csv package, use the following import directives:

// For the stream and callback APIs
import {generate, parse, transform, stringify} from '/your/path/lib/csv/index.js'
// Or for the sync API
import {generate, parse, transform, stringify} from '/your/path/lib/csv/sync.js'

When using individual packages:

// For the stream and callback APIs
import {generate} from '/your/path/lib/generate/index.js'
import {parse} from '/your/path/lib/parse/index.js'
import {transform} from '/your/path/lib/transform/index.js'
import {stringify} from '/your/path/lib/stringify/index.js'
// Or for the sync API
import {generate} from '/your/path/lib/generate/sync.js'
import {parse} from '/your/path/lib/parse/sync.js'
import {transform} from '/your/path/lib/transform/sync.js'
import {stringify} from '/your/path/lib/stringify/sync.js'

Vanilla JavaScript

A working demo is available in the project demo/browser directory.

With Express, expose the files with:

const app = express();
app.use('/lib/csv/',
  express.static(`node_modules/csv/dist/esm/`));
app.listen(3000);

The HTML code looks like:

<script type="module">
  import {transform} from '/lib/csv/index.js';
  transform(input, handler, options, (err, data) => {
    console.info(data)
  });
</script>

If you wish to use the sync API, use:

<script type="module">
  import {transform} from '/lib/csv/sync.js';
  const data = transform(input, handler, options);
</script>

Webpack module bundler

This distribution is compatible with webpack version 5. It comes with the Node.js polyfills. A working demo is shared on the project repository.

In your module, import the appropriate csv module:

import * as csv from 'csv-parse/browser/esm/index.js';
// Or
import * as csv from 'csv-parse/browser/esm/sync.js';

The relevant webpack configuration looks like:

  {
    entry: './src/csv.js',
    mode: 'development',
    output: {
      filename: 'csv.js',
      path: path.resolve(__dirname, 'dist'),
    }
  },
  {
    entry: './src/csv_sync.js',
    mode: 'development',
    output: {
      filename: 'csv_sync.js',
      path: path.resolve(__dirname, 'dist'),
    }
  },

./demo/webpack/webpack.config.js