keemor.com - Surfin' JavaScript Wave

ES6 in Dojo Toolkit 1.12 with Google Closure

The latest release of Dojo 1.12 from December 2016 is updated to use Closure Compiler 20160911 which supports transpiling ES6 to ES5.

I have in one project older ES5 modules and new ones in ES6.

In ES6 modules you must add „use strict” at the beginning, otherwise building fails.


error(307) Failed to evaluate module tagged as pure AMD
(fell back to processing with regular expressions). module: app/es6/Test;
error: SyntaxError: Block-scoped declarations (let, const, function, class)
not yet supported outside strict mode

app/es6/Dialog.js


"use strict"
define(["dijit/ConfirmDialog"], (ConfirmDialog) => {
    let id = "1"
    const dialog = new ConfirmDialog({
    title: "Delete",
    content: `Are you sure you want to delete ${id} ?`,
    style: "width: 300px"
    })
    return dialog
})

Then in your app.profile.js add optimizeOptions object


...
optimizeOptions: {
    languageIn: "ECMASCRIPT6",
    languageOut: "ECMASCRIPT5"
},
layerOptimize: "closure.keeplines",
optimize: "closure.keeplines",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
selectorEngine: "lite",
useSourceMaps: false,
...
layers: {
    "dojo/dojo": {
        includeLocales: ["en-us"],
        include: ["dojo/dojo", "dojo/hash"],
        boot: true,
        customBase: true
    },
    "app/Main": {
        includeLocales: ["en-us"],
        include: ["app/Header", "app/Main"]
    }
},
...

app/Main.js


define(["app/es6/Dialog"], function(Dialog) {
    Dialog.show();
});

This way you can integrate ES6 into your current Dojo project.

I was also trying to avoid „use strict” in ES6 modules by setting languageOut: ECMASCRIPT5_STRICT as mention here but it breaks Dojo itself.