esmify

esmify

A dead-simple tool to add import / export ES Module syntax for browserify.

This plugin does the following to your bundler:

• Adds .mjs extension to module resolution
• Resolves to "module" field when "browser" field is not defined
• Transforms ES Module syntax (static import / export statements) into CommonJS

Here's how you use it:

browserify index.js -p esmify > bundle.js

Also works with budo, for example:

budo index.js --live -- -p esmify

The plugin ignores dynamic import expressions and skips files that don't include import / export expressions to maintain performance. It runs across your bundle (including node_modules) as one of the goals is to support ESM syntax that is beginning to appear in the wild in many npm modules.

Install

Use npm to install.

npm install esmify --save-dev

Also can be used via API like so:

browserify({
  plugin: [
    [ require('esmify'), { /* ... options ... */ } ]
  ]
});

Usage

plugin = esmify(bundler, opt = {})

Returns a browswerify plugin function that operates on bundler with the given options:

• mainFields which describes the order of importance of fields in package.json resolution, defaults to [ 'browser', 'module', 'main' ]
• plainImports (Experimental) this feature will map named imports directly to their CommonJS counterparts, without going through Babel's inter-op functions. This is generally needed for static analysis of fs, path and other tools like glslify in browserify. Defaults to [ 'fs', 'path', 'glslify' ].

How it Works

Under the hood, this is using Babel with a couple plugins specific to CommonJS/import/export.

License

MIT, see LICENSE.md for details.