Awesome

mimosa-es6-module-transpiler

Overview

This module will allow you to utilize ES6 module syntax when building your client code. It will transpile your JavaScript with ES6 syntax to AMD or CommonJS compliant JavaScript. It can also output code that attaches modules to global scope.

For more information regarding Mimosa, see http://mimosa.io

Usage

Add 'es6-module-transpiler' to your list of modules. That's all! Mimosa will install the module for you when you start up.

Functionality

This module will take your ES6 module syntax code and compile it down to a syntax usable with common module specs: AMD and CommonJS.

It will also allow you to compile it down to a format that exports code globally. If a module is exported globally, you may want to declare any imports it might have. See the Example Config below.

Using a JavaScript transpiler like CoffeeScript? For syntax like import to survive being transpiled, you must use the compilers built-in ability to pass some code through the transpiler. CoffeeScript, for instance, uses the backtick to essentially have the CoffeeScript compiler ignore the code contained within.

The CoffeeScript code below in an example:

`import $ from "jquery"`
`import templates from "templates"`

class ExampleView

...

`export default ExampleView`

will be compiled to

define(
  ["jquery","templates"],
  function($, templates) {
    "use strict";
    var ExampleView;

    ...

    return ExampleView;
  });

Note: The ES6 transpiler currently does not support source maps. So source maps will not be generated, nor will source maps already present (as from CoffeeScript) be honored or updated. They will not, however, be removed.

Note: The ES6 module syntax is fluid and may change down the road.

Note: This does not support the full set of ES6 module syntax, but it does the support the major pieces. This module wraps square's transpiler, so as it adds features and more feature support this module will benefit.

Default Config

es6Modules: {
  type:"amd",
  inferName:true,
  exclude: [/[/\\]vendor[/\\]/, /[/\\]main[\.-]/, /-main.js$/, /[/\\]common.js$/],
  globals:{}
}

• type: "amd", "common", or "globals"
• inferName: Whether or not to use anonymous bundled AMD modules. If this is set to true, then names are inferred, if set to false, modules are anonymous.
• exclude: List of regexes or strings to match files that should be excluded from transpiling. String paths can be absolute or relative to the watch.sourceDir. Regexes are applied to the entire path. Regexes are applied to the entire path. By default anything in a vendor folder and anything that begins with 'main.' or 'main-', or that end in '-main' or 'common.js' are excluded as presumably those should not be wrapped in a define as they are likely already "require"d or shimmed.
• globals: globals contains configurations for modules that you want to export themselves globally if you are not using a module loading strategy. See the Example Config below for example usage of the globals config.

Example Config

es6Modules:
  type:"globals"
  globals:
    "/javascripts/app/example":
      global: "ExampleApp"
      imports:
        jquery: "$"

• global's keys are file paths to files in the watch.sourceDir. Each file that needs to export globally needs to have a path provided here. The path can include or not include the extension.
• global: global is the name of the global object that the export from the module gets attached to, if not provided it gets attached to window.
• imports: contains dependencies for the module, with the key being the variable name once imported and the value being the global name of the object to be imported. Any files not listed in globals are treated with the type config of either amd or common.