Browserify + browserify-ngannotate + Tsify не работает
Я использую глоток с browserify и tsify. Это работало довольно хорошо. Затем я решил добавить ng-annotate, используя browserify-ngannotate.
Я добавил преобразование ng-annotate browserify, но кажется, что если tsify добавлен как плагин, преобразование ng-annotate никогда не вызывается.
Если я удаляю плагин tsify, то вызывается ng-annote. Я поиграл и переключился на регистрацию плагина / трансформации. Я что-то здесь упускаю, или я должен пойти и зарегистрировать проблему в browserify / 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;
2 ответа
Вы можете решить эту проблему, указав расширения в параметрах ng-annotate.
bundler.transform(ngAnnotate, { ext: ['.ts', '.js'] });
Я понял, что у меня тоже есть эта проблема, когда я добавил 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
операторы перед кодом минимизируются, что имеет значение в большинстве случаев.