Gulp-Uglify - 无法缩小 Javascript Angular 1.6.8答案

【问题标题】：Gulp-Uglify - Unable to minify Javascript Angular 1.6.8Gulp-Uglify - 无法缩小 Javascript Angular 1.6.8
【发布时间】：2018-02-11 17:28:37
【问题描述】：

您好，我正在尝试使用 gulp uglify 缩小我的 app.js 文件，我使用 pump 来获取错误详细信息，它在第 2 行给我一个错误

GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: name (app)
File: /Users/Alexander/OneDrive/Alexander/scripts/app.js
Line: 2

我的 app.js 中的第 2 行是let app = angular.module("app", ["ngRoute"]);

这是我完整的 app.js 文件

let app = angular.module("app", ["ngRoute"]);


app.config(function ($routeProvider) {
   $routeProvider

       .when("/",{
           templateUrl : "templates/home.html"
       })

       .when("/resume",{
           templateUrl: "templates/resume.html"
       })

       .when("/contact",{
           templateUrl: "templates/contact.html"
       });

});

app.controller("MainController",["$scope", function ($scope) {

    $scope.name = "Alexander Personal Website";

}]);

这是我的 gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('compress', function (cb) {
    pump([
            gulp.src('scripts/*.js'),
            uglify(),
            gulp.dest('app')
        ],
        cb
    );
});

我看到 Question 上面写着 uglify 不适用于 es6，但我收到错误的那一行对于 es5 也是一样的。

我希望那里有足够的细节。感谢您调查此问题。

【问题讨论】：

你可以尝试用 var 替换 let 吗？
从 let 更改为 var。
是的，它起作用了:)。您能否写一个答案并说明为什么 var 对 let 起作用。谢谢！
好的，给我一些时间。
我已经发布了一个答案，让我知道您的反馈。

标签： javascript angularjs gulp gulp-uglify

【解决方案1】：

什么是var和let？

用var 定义的变量的作用域是函数作用域或在任何函数之外声明的全局变量。

用let 定义的变量的作用域是块作用域。

在 ES6 中，引入let。通常所有浏览器都支持 ES6 语法，但是已经构建在早期版本上的插件会抛出错误。可能主要原因是你的错误。

由于我们的代码可能会通过 gulp-uglify 模块进行 uglify 并且不支持 ES6。如果我们的简单代码在浏览器中使用let 运行，那么它不会抛出错误。

那么请问应该怎么做呢？

要使用 ES6 功能，必须将我们的 ES6 代码转换为 ES5，以便它可以在我们当前的浏览器上无缝运行。有几种工具可以完成这项任务，在本教程中，我们将使用 Babel。

我们还将使用名为 Webpack 的模块捆绑工具将所有源 javascript 文件捆绑到一个文件中。通过 Webpack 对 Babel 的支持以插件的形式提供，我们将使用它们来自动执行转译任务。这意味着一旦我们配置了这些插件，我们只需要编写 ES6 代码，Webpack 将负责其余的工作。

【讨论】：