Minification Issues When Using ES6 in Your Custom Code

This article documents a minification error you will encounter if using ECMAScript 6 (ES6) in your custom code and the ES6 code is not transpiled.

In a production environment, we enable the following property in order to minify CSS and JavaScript resources, and to make our code lighter.

minifier.enabled=true

In Liferay Digital Enterprise 7.0, we use Google Closure Compiler (closure-compiler.jar) to carry out this minification process. The version v20131014 of this library has a limitation that it does not minify ES6 code if it is not transpiled. You will see an error very similar to the following.

2018-05-18 13:32:48.754 ERROR [http-nio-7180-exec-3][GoogleJavaScriptMinifier:116] (/o/com.liferay.docs.mvcportlet/js/main.js:3): Parse error. missing ; before statement
2018-05-18 13:32:48.756 ERROR [http-nio-7180-exec-3][GoogleJavaScriptMinifier:116] (/o/com.liferay.docs.mvcportlet/js/main.js:5): Parse error. illegal character
2018-05-18 13:32:48.756 ERROR [http-nio-7180-exec-3][GoogleJavaScriptMinifier:116] (/o/com.liferay.docs.mvcportlet/js/main.js:5): Parse error. missing ) after argument list
2018-05-18 13:32:48.757 ERROR [http-nio-7180-exec-3][GoogleJavaScriptMinifier:116] (/o/com.liferay.docs.mvcportlet/js/main.js:5): Parse error. illegal character
2018-05-18 13:32:48.757 ERROR [http-nio-7180-exec-3][GoogleJavaScriptMinifier:116] (/o/com.liferay.docs.mvcportlet/js/main.js:5): Parse error. syntax error
2018-05-18 13:32:48.758 ERROR [http-nio-7180-exec-3][GoogleJavaScriptMinifier:129] {0} error(s), {1} warning(s)

Resolution

Transpile your code.

Please refer to the following developer's tutorial explaining some ways to do this.

JS Transpiler Gradle Plugin
Preparing Your JavaScript Files for ES2015

Additional Information

If we disable the minification process via minifier.enabled=false, the error will not occur. However, we do not recommend disabling the minification process in a Production environment.

这篇文章有帮助吗?
0 人中有 0 人觉得有帮助