Browserify + browserify-ngannotate + Tsify 不工作

Question

我将 gulp 与 browserify 和 tsify 一起使用。这一直运作良好。然后我决定使用 browserify-ngannotate 添加 ng-annotate。

我已经添加了 ng-annotate browserify 转换，但似乎如果将 tsify 添加为插件，则永远不会调用 ng-annotate 转换。

如果我删除 tsify 插件，则会调用 ng-annote。我玩过并切换了 plugin/transform 注册。我是不是遗漏了什么，或者我应该去 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;

Answer 1

当我将 uglifyify 添加到包转换以生成 minified 构建时，我意识到我也遇到了这个问题。

我的解决方案的一个重要方面是缺失的显式 $inject 语句 ng-annotate should have inserted, doesn't matter until the code is actually minified. Luckily, UglifyJS2，它在 uglifyify 中进行实际缩小，得到了处理 [=14] 的支持=]在 2.4.9 版（2014 年 1 月）中的 ngInject 条评论。

所以，对我有用的解决方案是安装 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 语句38=]，这在大多数情况下很重要。

Answer 2

您可以通过在 ng-annotate 选项中指定扩展来解决它。

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

Browserify + browserify-ngannotate + Tsify 不工作

Browserify + browserify-ngannotate + Tsify not working

node.js

gulp

browserify

ng-annotate