当前位置: 代码迷 >> 综合 >> maven支持ecmascript6的插件 minify-maven-plugin/closure-compiler-maven-plugin
  详细解决方案

maven支持ecmascript6的插件 minify-maven-plugin/closure-compiler-maven-plugin

热度:49   发布时间:2024-01-04 06:37:30.0

在我们使用maven打包时,很多时间需要压缩js,以前很流行的yuicompressor-maven-plugin插件,随着es6的到来,已经变得不可用了。网上经过众多搜索后,发现可以使用Minify Maven Plugin/closure-compiler-maven-plugin插件使maven能支持es6的压缩。

  1. Minify Maven Plugin
            此插件集成了yuicompressor 与google 的closure-compiler编译器,可以压缩css/js,但是缺点使用的closure-compiler是2016年版本,压缩后的目标文件不能生产ECMASCRIPT2015(ES6)(使用WHITESPACE_ONLY模式时,可以生成ES6版本,但是...)版本,最高只能生成ES5。

            具体使用可以参考
    https://github.com/samaxes/minify-maven-plugin
    https://samaxes.github.io/minify-maven-plugin/

    这里介绍一下不加.min后缀的压缩方式:(configuration中的配置参数都可以使用eclipse自动提示功能查看其意义)
     
    <plugin><groupId>com.samaxes.maven</groupId><artifactId>minify-maven-plugin</artifactId><version>1.7.6</version><executions><execution><id>default-minify</id><configuration><charset>UTF-8</charset><cssSourceDir>./</cssSourceDir><!-- 压缩webapp目录下的所有js文件,但是排除*.min.js文件; --><jsSourceDir>./</jsSourceDir><jsIncludes><jsInclude>**/*.js</jsInclude></jsIncludes><jsExcludes><jsExclude>**/*.min.js</jsExclude></jsExcludes><!-- 使用closure压缩时的压缩级别,默认值为SIMPLE_OPTIMIZATIONS。可选值: --><!-- WHITESPACE_ONLY:只压缩空格和转换一些特殊符号 --><!-- SIMPLE_OPTIMIZATIONS:简单的压缩 --><!-- ADVANCED_OPTIMIZATIONS:高级压缩,此压缩方式下可能会将引用的第3方框架的方法名称修改,导致js报错;慎用。 --><closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel><!-- js压缩引擎,默认值为YUI。可选值: --><!-- YUI: 使用YUI Compressor压缩; --><!-- CLOSURE: 使用Google Closure Compiler压缩 --><jsEngine>CLOSURE</jsEngine><skipMerge>true</skipMerge><!-- 不合并js/css --><nosuffix>true</nosuffix><!-- 压缩后的文件不.js前添加.min前缀 --></configuration><goals><goal>minify</goal></goals></execution></executions>
    </plugin>
    <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-war-plugin</artifactId><configuration><!-- 如果不增加此配置 src/main/webapp 下面的内容 会重新复制到target输出目录 覆盖掉编译后的内容 这样编译的还是未压缩过的内容,增加上此过滤 打war包就不会内容覆盖 --><warSourceExcludes><![CDATA[%regex[^.+(?:(?<!(?:-|\.)min)\.js)], %regex[^.+(?:(?<!(?:-|\.)min)\.css)]]]></warSourceExcludes></configuration>
    </plugin>
  2. closure-compiler-maven-plugin

            closure-compiler-maven-plugin这个插件是Minify Maven Plugin的变种,在其基础上演变而来的。可以支持压缩后的js格式为ES6,但不能支持css的压缩,configuration节点格式与Minify Maven Plugin插件有所不同。

            参见:
            https://github.com/blutorange/closure-compiler-maven-plugin
            https://blutorange.github.io/closure-compiler-maven-plugin/

    使用方法:(configuration中的配置参数都可以使用eclipse自动提示功能查看其意义)
    <plugins><plugin><!-- 此插件只能压缩js,不能压缩css;如果需要压缩css,可以考虑使用yuicompressor --><groupId>com.github.blutorange</groupId><artifactId>closure-compiler-maven-plugin</artifactId><version>2.9.0</version><executions><execution><id>default-minify</id><configuration><encoding>UTF-8</encoding><!-- 压缩webapp目录下的所有js文件,但是排除*.min.js文件; --><targetDir>./</targetDir><includes>**/*.js</includes><excludes>**/*.min.js</excludes><!-- 输出目录为${project.build.directory}/${project.build.finalName}下的目录,不配置时默认为js. --><sourceDir>./</sourceDir><!-- 跳过js文件合并 --><skipMerge>true</skipMerge><!-- js文件输出格式,默认为#{path}/#{basename}.min.#{extension} --><outputFilename>#{path}/#{basename}.#{extension}</outputFilename><!-- js源文件版本,直接填最高即可,都能向下兼容 --><closureLanguageIn>ECMASCRIPT_2019</closureLanguageIn><!-- js压缩后的文件格式版本,注意与浏览器的兼容性 --><closureLanguageOut>ECMASCRIPT_2015</closureLanguageOut><!-- 使用closure压缩时的压缩级别,默认值为SIMPLE_OPTIMIZATIONS。可选值: --><!-- WHITESPACE_ONLY:只压缩空格和转换一些特殊符号 --><!-- SIMPLE_OPTIMIZATIONS:简单的压缩 --><!-- ADVANCED_OPTIMIZATIONS:高级压缩,此压缩方式下可能会将引用的第3方框架/其它js文件中的的方法名称修改,导致js报错;慎用。 --><closureCompilationLevel>SIMPLE_OPTIMIZATIONS</closureCompilationLevel></configuration><goals><goal>minify</goal></goals><phase>generate-resources</phase></execution></executions></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-war-plugin</artifactId><configuration><!-- 如果不增加此配置 src/main/webapp 下面的内容 会重新复制到target输出目录 覆盖掉编译后的内容 这样编译的还是未压缩过的内容,增加上此过滤 打war包就不会内容覆盖 --><warSourceExcludes><![CDATA[%regex[^.+(?:(?<!(?:-|\.)min)\.js)], %regex[^.+(?:(?<!(?:-|\.)min)\.css)]]]></warSourceExcludes></configuration></plugin>

     

  相关解决方案