Browserify + browserify-ngannotate + Tsify не работает

Question

Я использую gulp с браузером и tsify. Это работает очень хорошо. Затем я решил добавить ng-annotate с помощью браузера-ngannotate.

Я добавил преобразование браузера ng-annotate, но кажется, что если tsify добавлен в качестве плагина, преобразование ng-annotate никогда не вызывается.

Если я удалю плагин tsify, тогда вызывается ng-annote. Я играл и переключал регистрацию плагина/трансформирования. Я что-то пропущу здесь, или мне нужно пойти и зарегистрировать проблему в браузере/tsify?

var browserify = require('browserify'); 
var browserSyncConfig = require('../config').browserSync; 
var browserSync = require('browser-sync').get(browserSyncConfig.instance); 
var watchify = require('watchify'); 
var tsify = require('tsify'); 
var ngAnnotate = require('browserify-ngannotate'); 
var mergeStream = require('merge-stream'); 
var bundleLogger = require('../util/bundleLogger'); 
var gulp = require('gulp'); 
var handleErrors = require('../util/handleErrors'); 
var source = require('vinyl-source-stream'); 
var config = require('../config').browserify; 
var _ = require('lodash'); 

var browserifyTask = function (devMode) { 

    var browserifyThis = function (bundleConfig) { 

     if (devMode) { 
      // Add watchify args and debug (sourcemaps) option 
      _.extend(bundleConfig, watchify.args, {debug: true}); 
      // A watchify require/external bug that prevents proper recompiling, 
      // so (for now) we'll ignore these options during development. Running 
      // `gulp browserify` directly will properly require and externalize. 
      bundleConfig = _.omit(bundleConfig, ['external', 'require']); 
     } 

     var b = browserify(bundleConfig); 

     if (bundleConfig.tsify) { 
      b = b.plugin(tsify, { 
       noImplicitAny: false, 
       target: 'ES5', 
       noExternalResolve: false, 
       module: 'commonjs', 
       removeComments: false 
      }); 
     } 

     if (bundleConfig.ngAnnotate) { 
      b = b.transform(ngAnnotate); 
     } 

     var bundle = function() { 
      // Log when bundling starts 
      bundleLogger.start(bundleConfig.outputName); 

      return b 
       .bundle() 
       // Report compile errors 
       .on('error', handleErrors) 
       // Use vinyl-source-stream to make the 
       // stream gulp compatible. Specify the 
       // desired output filename here. 
       .pipe(source(bundleConfig.outputName)) 
       // Specify the output destination 
       .pipe(gulp.dest(bundleConfig.dest)) 
       .pipe(browserSync.stream()); 
     }; 

     if (devMode) { 
      // Wrap with watchify and rebundle on changes 
      b = watchify(b, { 
       poll: true 
      }); 

      // Rebundle on update 
      b.on('update', bundle); 
      bundleLogger.watch(bundleConfig.outputName); 
     } else { 
      // Sort out shared dependencies. 
      // b.require exposes modules externally 
      if (bundleConfig.require) b.require(bundleConfig.require); 
      // b.external excludes modules from the bundle, and expects 
      // they'll be available externally 
      if (bundleConfig.external) b.external(bundleConfig.external); 
     } 

     return bundle(); 
    }; 

    // Start bundling with Browserify for each bundleConfig specified 
    return mergeStream.apply(gulp, _.map(config.bundleConfigs, browserifyThis)); 

}; 

gulp.task('browserify', function() { 
    return browserifyTask() 
}); 

// Exporting the task so we can call it directly in our watch task, with the 'devMode' option 
module.exports = browserifyTask; 

Answer 1

Вы можете решить эту проблему, указав расширения в опциях ng-annotate.

bundler.transform(ngAnnotate, { ext: ['.ts', '.js'] });

Answer 2

я понял, что я тоже была эта проблема, когда я добавил uglifyify в пучок превращается производить уменьшенная строит.

Важным аспектом моего решения является то, что пропавшие, явные $inject заявления, что ng-annotate должен вставили, не имеет значения до тех пор, пока код на самом деле уменьшенная. К счастью, UglifyJS2, который делает фактическое сокращение в uglifyify, получил поддержку для обработки ng-annotate's ngInject комментариев в версии 2.4.9 (в январе 2014 года).

Таким образом, решение, которое работало для меня было установить uglifyify:

npm install --save-dev uglifyify 

и добавьте следующие uglifyify преобразования к расслоению Browserify:

b.transform({ 
      global: true, 
      mangle: false, 
      comments: true, 
      compress: { 
       angular: true 
      } 
     }, 'uglifyify'); 

Это сделает UglifyJS2 вставить соответствующий $inject в свой код перед его минимизацией.

Таким образом, чтобы подвести итог, у меня не было решение для использования только ng-annotate, но мое решение добавит необходимые $inject заявления до того, как код уменьшенная, которая является то, что имеет значение в большинстве случаев.