当字符串以`字符开头时,Grunt uglify抛出解析错误

Question

我正在运行grunt uglify任务来缩小我的js文件但是当字符串以`字符开头时它给我​​错误.

我的字符串看起来像这样

var html = `<div class='list-item'>
              <span>ABC</span>
           </div>`;

我的Gruntfile.js uglifyjs块是这样的

uglify: {
  'dev': {
       options: {
          mangle: false
       },
       files: {
          'common/utility_functions.js': ['common/utility_functions.js']
       }
   }
}

当我运行grunt uglify时,它给了我以下错误

>> Uglifying source common/utility_functions.js failed.
   Warning: Uglification failed.
   SyntaxError: Unexpected character '`'.
   Line 162 in common/utility_functions.js
   Use --force to continue.

任何人都可以帮忙解决这个问题吗？我认为使用`字符是有效的.它在jshint过程中没有给我错误,因为我在jshint选项中添加了enext:true.

Answer 1

编辑:更新的答案2

该咕噜-的contrib-丑化-ES版现已发布到NPM.这是我在GitHub上的和谐分支,我在之前的更新答案中提到过.但是,它可以通过运行以下命令的npm直接安装:

npm i -D grunt-contrib-uglify-es

编辑:更新的答案

自回答这个问题以来,已经提供了一个和谐的分支grunt-contrib-uglify.此版本处理ES6模板文字和其他ES6语法功能.

安装以下的和谐分支grunt-contrib-uglify:

1. 首先grunt-contrib-uglify通过CLI运行以下命令来卸载当前版本:

   npm un -D grunt-contrib-uglify
   

2. 接下来通过运行以下命

   npm i -D https://github.com/gruntjs/grunt-contrib-uglify.git#harmony
   

   (注意harmony通过npm注册表不可用的分支,所以我们直接通过GitHub安装它)

3. 您package.json现在将包含以下代码段:

   ...
   "devDependencies": {
       ...
       "grunt-contrib-uglify-es": "git+https://github.com/gruntjs/grunt-contrib-uglify.git#harmony"
       ...
   }
   ...
   

4. uglify按正常方式运行您的任务,您将不会遇到错误消息.

原始答案

您的字符串使用ES6 Template Literal语法,uglify -js(使用的JavaScript解析器/ mangler /压缩器grunt-contrib-uglify)不支持此功能.

有关详细信息,请参阅此帖子的答案.

如果您的项目需要使用ES6功能,那么请考虑使用诸如Babel之类的JavaScript转换器来转换代码,然后使用生成的ES5代码grunt-contrib-uglify.

或者,如果ES6模板文字是项目使用的ES6语法的唯一部分,则始终可以选择恢复为旧字符串而不是字符串.例如

var html = '<div class=\'list-item\'' +
              '<span>ABC</span>' +
           '</div>';

上面显示的示例代码将成功处理grunt-contrib-uglify.