压缩供应商的JS库

问题描述:

我试图得到一个单一的vendor.min.js,以减少被加载的外部文件的数量和这样做,我有以下一饮而尽任务:压缩供应商的JS库

gulp.task('vendor-bundle', function() { 
    gulp.src([ 
       'core-js/client/shim.min.js', 
      'systemjs/dist/system-polyfills.js', 
      'systemjs/dist/system.src.js', 
      'reflect-metadata/Reflect.js', 
      'rxjs/**/*.js', 
      'zone.js/dist/zone.js', 
      '@angular/**/bundles/*.umd.js', 
      '@ng-bootstrap/**/bundles/ng-bootstrap.js', 
      'jquery/dist/jquery.min.js', 
      'bootstrap/dist/js/*.js', 
      'tether/dist/**/tether.min.js', 
    ],{cwd: "node_modules/**"}) 
    .pipe(concat('vendors.min.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('dist')); 
}); 

当我再尝试运行我的Angular 2应用程序出现以下错误:

Uncaught SyntaxError: Identifier 'window' has already been declared 
    at vendors.min.js:1 
(anonymous) @ vendors.min.js:1 
app.js:1 Uncaught ReferenceError: define is not defined 
    at app.js:1 
(anonymous) @ app.js:1 

我假设这是因为所有组合在一起的单个文件都可能导致定义冲突?我在我的app.js中得到另一个错误,我认为这是因为vendors.min.js由于我得到的错误而未能加载。有没有办法删除重复的定义或更好的方法来将供应商文件连接成一个单一的文件来减少要获取的资源?

删除此行有重复的变量

.pipe(concat('vendors.min.js')) 
+0

你得到所有的JS文件捆绑成一个单一的js文件,如果这是可能的怎么样呢? –

+0

所有js文件都与webpack捆绑在一起。 –

+0

没错 - 我现在正在尝试!谢谢您的帮助 –