丑化失败。意外字符'`'答案

【问题标题】：Uglification failed. Unexpected character '`'丑化失败。意外字符'`'
【发布时间】：2015-12-21 14:45:49
【问题描述】：

gulp-uglify 无法丑化这段代码：

    var alertString = `<?xml version="1.0" encoding="UTF-8" ?>
        <document>
          <alertTemplate>
            <title>${title}</title>
            <description>${description}</description>
          </alertTemplate>
        </document>`

它抱怨字符：`。该字符适用于苹果的 JS 框架。我看不到 uglify 包中的任何内容来忽略这些字符和其中的文本字符串。我是否遗漏了文档中的某些内容？

【问题讨论】：

标签： gulp gulp-uglify tvml tvjs

【解决方案1】：

Gulp-uglify 还没有对 ECMAScript 2015（又名 ES6，又名 Harmony）的官方支持，但稍作修改即可使用开发中的存储库。

操作方法：

打开控制台进入

cd node_modules/gulp-uglify

编辑 package.json

dependencies": { "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony" },

控制台输入：

npm update

它已准备好再次运行.pipe(uglify())

替代解决方案

通过npm下载以下内容：

npm install --save-dev gulp-uglify gulp-babel babel-preset-es2015

在gulpfile.js 中添加以下要求：

var babel = require('gulp-babel'), uglify = require('gulp-uglify');

gulp 任务如下：

gulp.task('uglify', function(){ gulp.src('*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify().on('error', function(e){ console.log(e); })) .pipe(gulp.dest('js')); });

它的作用是将所有 EcmaScript 2015 JS 代码转换为 EcmaScript5，然后对其进行 uglifying。

【讨论】：

这是一个 gulp 解决方案，您的问题从 grunt 开始。你改用 gulp 了吗？
@JonHarding 哦，是的。我完全忽略了它。谢谢你指出。当我切换到 gulp 时，我遇到了同样的问题，但更容易找到解决方案。我会编辑答案，因为我对 gulp 有同样的问题

【解决方案2】：

新版本的 gulp-uglify 支持 ES6，称为 gulp-uglify-es。如果你使用 Gulp 4，你也可以使用 .browserlistrc。以下是我正在使用的需要 Chrome 和 Firefox 56 支持的项目示例。

gulpfile.js

    const uglify = require('gulp-uglify-es').default;

    .pipe(babel({
        presets: ['@babel/preset-env'],
        compact:false
     }))
     .pipe(uglify())

.browserlistrc (read more on browserlist)

last 2 chrome versions
firefox 56

【讨论】：

【解决方案3】：

使用 Flask + Jinja2 我已经解决了类似的问题如下：

烧瓶

render_template('template.html', text='"+`Text\nhere`+"')
应用 uglify ...
JS

var 结果 = "{{text}}"; // ---> "" + `Text\nhere` + "";

【讨论】：