es6-module-transpiler-brunch
Adds ES6 module syntax to Brunch based on Square's es6-module-transpiler.
ES6 Module Transpiler is an experimental compiler that allows you to write your JavaScript using a subset of the current ES6 module syntax, and compile it into AMD or CommonJS modules.
Usage
Install the plugin via npm with npm install --save es6-module-transpiler-brunch
.
Or, do manual install:
- Add
"es6-module-transpiler-brunch": "x.y.z"
topackage.json
of your brunch app. - If you want to use git version of plugin, add
"es6-module-transpiler-brunch": "git+ssh://git@github.com:gcollazo/es6-module-transpiler-brunch.git"
.
Supported ES6 Module Syntax
Again, this syntax is in flux and is closely tracking the module work being done by TC39.
Named Exports
There are two types of exports. Named exports like the following:
// foobar.jsvar foo = "foo" bar = "bar"; ;
This module has two named exports, foo
and bar
.
You can also write this form as:
// foobar.jsvar foo = "foo";var bar = "bar";
Either way, another module can then import your exports like so:"
; console; // "foo"
Default Exports
You can also export a default export. For example, an ES6ified jQuery might look like this:
// jquery.jsvar {}; jQueryprototype = // ...; = jQuery;
Then, an app that uses jQuery could import it with:
;
The default export of the "jquery" module is now aliased to $
.
A default export makes the most sense as a module's "main" export, like the
jQuery
object in jQuery. You can use default and named exports in parallel.
Other Syntax
module
Whereas the import
keyword imports specific identifiers from a module,
the module
keyword creates an object that contains all of a module's
exports:
module foobar from "foobar";console; // "foo"
In ES6, this created object is read-only, so don't treat it like a mutable namespace!
import "foo";
A "bare import" that doesn't import any identifiers is useful for executing side effects in a module. For example:
// alerter.js; // alertee.js; // will pop up alert box
How the plugin works
The plugin will take all files ending in *.js
under the app
directory and pass them through the es6-module-transpiler
and compiled as CommonJS modules.
Plugin Config
The plugin has two configuration options you can add to your project's config.coffee
: match
which is a regex used to decide what files to compile and debug
which will console.log
debugging info when the plugin runs.
exportsconfig = es6ModuleTranspiler: match: /^app/ debug: yes