dojo 构建系统无法识别 es6 语法

Question

我正在从事一个 dojo 项目 (1.11.x)，最近开始使用 ES6(ES2015) 语法，例如 const、let 和模板文字。在我使用 dojo-util 构建项目之前，它运行良好。我有如下错误

ERROR - Parse error. TypeError: redeclaration of const {variable name}
ERROR - Parse error. illegal character
                     return `<a href="/xxx/xxx/${a}">${b}</a>`;
                            ^

有没有办法让构建系统识别 ES6 语法或绕过语法检查？

Answer 1

2016 年 12 月的最新版本 Dojo 1.12 已更新为使用支持将 ES6 转换为 ES5 的 Closure Compiler 20160911。

我在一个项目中有旧的 ES5 模块和 ES6 中的新模块。

在 ES6 模块中你必须在开头添加 "use strict"，否则构建失败。

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"
    })
    dialog.show()
})

然后在你的 app.profile.js 中添加 optimizeOptions 对象

...
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();
});

这样您可以将 ES6 集成到您当前的 Dojo 项目中。

我还试图通过将 languageOut: ECMASCRIPT5_STRICT 设置为 mention here 来避免在 ES6 模块中“使用严格”，但这会破坏 Dojo 本身。

Answer 2

由于 Dojo 1.x 的开发似乎停滞不前，并且无法轻松迁移到 Dojo 2.x，因此我们必须想出一个解决方案。我们作为开发人员被 ES5 特性所困，这变得越来越荒谬，只是因为构建过程无法处理它。

这就是我想出一个解决方法的原因，该解决方法目前正在我们公司进行测试。对于感兴趣的人，这就是我们解决这个问题的方法（并且仍然使用 dojo 构建过程的核心部分）：

• 在构建配置文件中禁用优化（layerOptimize：false，optimize：false）
• 在 package.js 中将所有小部件标记为非 AMD (amd: function(){ return false;})
• 这会导致所有小部件在构建中收到警告，但没有失败
• 构建过程完成后，所有“层”文件都是完整的（可能包括 ES6 功能），但没有缩小，因此大小非常大。
• 在 maven（或您选择的构建工具）中，运行任何适合您的压缩程序。
• 我们使用具有以下设置的最新 Closure 编译器，它将 ES2017 代码转换为 ES5。

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-antrun-plugin</artifactId>
  <executions>
    <execution>
      <exec executable="java" resolveexecutable="true" failonerror="true">
        <arg value="-jar" />
        <arg value="${google.closure.compiler.es2017}" />
        <arg value="--language_in=ECMASCRIPT_2017" />
        <arg value="--language_out=STABLE" />
        <arg value="--js" />
        <arg value="${dojo.build.path}/build/layers/OriginalLayer.js" />
        <arg value="--js_output_file" />
        <arg value="${dojo.build.path}/build/layers/MinifiedLayer.js" />
      </exec>
    </execution>
  </executions>
</plugin>

这仍然是实验性的，但最初的结果看起来不错，并且似乎可以在没有回归的情况下工作。