使用 gulp uglify minify 编译 angular 1.5 组件代码，当有 `` 引用 html 时不工作

Question

'use strict'

angular.module('dog.Component',[])
.component('dogComponent',{
  // templateUrl:'home.html',  // this line will be fine
  template:`<h1>Anything Here will screw up the code</h1>`
})

所以我使用 gulp 将所有 angular js 代码编译成一个。似乎在 angular 1.5.8 或关闭时，当使用 `` 引号时，uglify 无法缩小代码..

'use strict';

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')


var indexTarget=[
  './page.index/*.js'
]
gulp.task('index',function(){
  return gulp.src(indexTarget)
          .pipe(concat('index.js'))
          .pipe(uglify())
          .pipe(gulp.dest('page.index/'))
  })


gulp.task("watch", function(){
  gulp.watch(jstarget, ["js"])
})

哪位有经验的可以快速看一下？

Answer 1

反引号是 ES2015 的一个特性，但 gulp-uglify 只识别 ES5 语法。最简单的解决方案是首先将您的源代码通过 babel 进行管道传输，babel 可以将 ES2015 语法转换为 ES5 语法，然后对其进行 uglify。

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

var indexTarget=[
  './page.index/*.js'
]
gulp.task('index',function(){
  return gulp.src(indexTarget)
          .pipe(concat('index.js'))
          .pipe(babel({ presets: ['es2015'] }))
          .pipe(uglify())
          .pipe(gulp.dest('page.index/'))
  })

应该可以，并且可以让您安全地使用 ES2015 语法。您需要将 gulp-babel 和 babel-preset-es2015 添加到您的项目中。也许也 babel-cli 虽然我认为安装 gulp-babel 应该将其作为依赖项引入

你还需要告诉babel使用es2015插件。您可以通过创建 .babelrc 文件或将配置添加到 package.json 来实现。最低配置是创建 .babelrc 包含：

{
  "presets": ["es2015"]
}

检查 https://babeljs.io/docs/learn-es2015/ 以查找可让您直接使用的 ES2015 语法的哪些部分。对于某些功能（例如生成器），您可能还需要添加一个 polyfill，但只需在构建管道中包含 babel 就可以使用很多功能。

使用 gulp uglify minify 编译 angular 1.5 组件代码，当有 `` 引用 html 时不工作

compile angular 1.5 component code with gulp uglify minify, not working when there are `` quoted html

angularjs

gulp

gulp-uglify

angular-components